易于进出的效果不起作用

Question

我想创建一个效果叠加轻松进入，但遗憾的是无法正常工作。你能告诉我出了什么问题吗？

＆＃13;

＆＃13;

.product-item-info{
  position:relative;
  width:600px;
}
.product-item-info:hover:after {
  opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
}
.product-item-info:after {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
  -webkit-transition: all 30s ease-in-out 30s;
  -moz-transition: all 30s ease-in-out 30s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 3s ease-in-out 30s;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
}

＆＃13;

<ul>
  <li class="product-item">
        <div class="product-item-info">
           <img class="product-image-photo" src="http://stagepearl.weltpixel.com/pub/media/catalog/product/cache/8/image/600x600/beff4985b56e3afdbeabfc89641a4582/1/0/10001-00001-os_03_grande_1.jpg" alt="Test22" width="600" height="600">
        </div>  
  </li>
</ul> 

＆＃13;

＆＃13;

＆＃13;

提前致谢！

Answer 1

它的工作很好 - 您有transition 供应商前缀的不同值。我将过渡调整为：

transition: all 3s ease-in-out 0s;

见下面的演示：

＆＃13;

＆＃13;

.product-item-info {
  position: relative;
  width: 600px;
}
.product-item-info:hover:after {
  opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
}
.product-item-info:after {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
  -webkit-transition: all 3s ease-in-out 0s;
  -moz-transition: all 3s ease-in-out 0s;
  -ms-transition: all 3s ease-in-out 0s;
  transition: all 3s ease-in-out 0s;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
}

＆＃13;

<ul>
  <li class="product-item">
    <div class="product-item-info">
      <img class="product-image-photo" src="http://stagepearl.weltpixel.com/pub/media/catalog/product/cache/8/image/600x600/beff4985b56e3afdbeabfc89641a4582/1/0/10001-00001-os_03_grande_1.jpg" alt="Test22" width="600" height="600">
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;