交叉淡入淡出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>