我想创建一个效果叠加轻松进入,但遗憾的是无法正常工作。你能告诉我出了什么问题吗?
.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;
}

<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;
提前致谢!
答案 0 :(得分:0)
它的工作很好 - 您有transition
供应商前缀的不同值。我将过渡调整为:
transition: all 3s ease-in-out 0s;
见下面的演示:
.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;