0.7の不透明度を持つ2つの画像をクロスフェードする

Question

私はお互いの上に2枚の写真があります。上にマウスを置くと、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>