ホバー上のオーバーレイ透明画像

Question

私はにbackground-imageを持っています。これを上に置くと、元の画像が下に表示されるように、別の画像を部分的に透明にすることができます。

私の現在の考えは、:hover状態を追加し、必要z-index値と共に上記画像をvisibleへdisplay状態を変更関与しました。

誰かが私にjsfiddle.netの実装例を教えてもらえますか？

Answer 1

はあなたのための簡単な例をホイップ。 「コードスニペットを実行する」を押すと、実際の動作を確認できます。

.image-holder { 
 
    background: url('http://i.imgur.com/5ln9Vmi.jpg'); 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
.image-holder::before { 
 
    content: ''; 
 
    background: url('http://i.imgur.com/khYHDfJ.jpg'); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
} 
 

 
.image-holder:hover::before { 
 
    opacity: .5; /* amount of opacity to blend the two images */ 
 
}

<div class="image-holder"> 
 
</div>

Answer 2

なぜ使用しないのですかopacity？

不透明度CSSプロパティは、要素の透明度、つまり要素の背景がオーバーレイされる度合いを指定します。

この値は、値が子要素に継承されていなくても、その内容（内容は ）を含め、要素全体に適用されます。したがって、 要素とそれに含まれる子要素は、要素とその子要素が互いに異なる不透明度の異なる を持っていても、要素の背景に対して同じ相対不透明度 を持ちます。

.myTransparentImage{ 
    opacity: 0; 
} 

.myTransparentImage:hover{ 
    opacity: 0.6; /* it's in pourcentage */ 
} 

この方法で、透明画像は、ホバーで、あなたはまだ、以下のものを見ることができる60％opacityに表示されます。だから、それはいつも他のイメージの上にありますが、一度覆われて見えるだけです。ここで

はフィドル例である：https://jsfiddle.net/5ob6n7nq/

Answer 3

私が正しくあなたを理解していれば：https://jsfiddle.net/3jabz7d3/

<div class="block1"> 
    <div class="block2"></div> 
</div> 


.block1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center; 
    background-size: cover; 
} 

.block2 { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center; 
    background-size: cover; 
    display: none; 
    opacity: 0.3; 
} 

.block1:hover .block2{ 
    display: block; 
}