画像がホバー上に表示される画像

Question

私はこの質問が（hereとhere）以前に尋ねられたことは知っていますが、何らかの理由で同じテクニックを使用すると私が働くことはできません。あなたは

あなたはこれを取得する必要があり、この上にカーソルを移動基本的にはとき：

ところで

、ホバリング時に新しいイメージをロードせずにこれを行うための簡単な方法がありますならば、私にお知らせください。

ここに私が試したものです：

HTML

<div class="image"> 
<a href="#"> 
<img class="image" src="wp-content/themes/TheBullshitCollection/Images/bs-1.jpg"> 
</a> 
</div> 

CSS

.image { 
width: 100%; 
margin-right: 28px; 
margin-bottom: 28px; 
display: inline-block; 
} 

.image a:hover { 
display:block; 
background-image:url("/wp-content/themes/TheBullshitCollection/Images/bs-1.5.jpg"); 
margin-right:28px; 
margin-bottom:28px; 
transition: all 0.2s ease-in-out; 
position: absolute; 
z-index:1; 
width: 100px; 
height: 120px; 
}  

JSフィドルリンク：

https://jsfiddle.net/ot8a5oba/

あなたはそのトンを見ることができます彼の幅と高さも私を混乱させている - 私はそれが同じサイズのままであることを確認する方法と、それが上に現れることを確認する方法がわかりません。前もって感謝します！

Answer 1

これは、オーバーレイを適用するために擬似要素を使用してこのように行います。かなり単純化する。

.imageContainer a { 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.imageContainer a:after { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: rgba(139,69,19,0.5); 
 
    content: 'Buy'; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
    font: 5em cursive; 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
} 
 

 
.imageContainer a:hover:after { 
 
    opacity: 1; 
 
} 
 

 
.imageContainer img { 
 
    max-width: 100%; 
 
    vertical-align: top; 
 
} 
 

 
/* 
 
.image a:hover { 
 
    display: block; 
 
    background-image: url("http://i.imgur.com/ARiA0ua.jpg"); 
 
    margin-right: 28px; 
 
    margin-bottom: 28px; 
 
    transition: all 0.2s ease-in-out; 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 100px; 
 
    height: 120px; 
 
} 
 
*/

<div class="imageContainer"> 
 
    <a href="#"> 
 
    <img class="image" src="http://i.imgur.com/F2PaGob.jpg"> 
 
    </a> 
 
</div>