交叉淡入淡出2张图像，不透明度为

Question

我有两张图片，上面有两张图片，如果你将鼠标悬停在上面，它会在1秒后从opacity:1到opacity:0。

我希望他们有opacity:0.7作为默认值，然后，当它悬停在另一个应该显示。

我遇到的问题是现在这两个图像都与opacity:0.7一起显示，因为显然它们稍微透明。

有没有办法做到这一点？

Answer 1

据我了解，您的底层图像也有点可见。

你需要做的是第一图像的不透明度设置为0，像这样：

.img-overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.img-overlay img { 
 
    opacity: .7; 
 
    transition: opacity 1s; 
 
} 
 

 
.img-overlay img:last-child { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
} 
 

 
/* Set opacity to 0, ... */ 
 
.img-overlay:hover img { 
 
    opacity: 0; 
 
} 
 

 
/* ... but only for the last image set it to .7 */ 
 
.img-overlay:hover img:last-child { 
 
    opacity: .7; 
 
}

<a href="#" class="img-overlay"> 
 
    <img src="http://pipsum.com/235x110.jpg?1" /> 
 
    <img src="http://pipsum.com/235x110.jpg?2" /> 
 
</a>