Bild über Bild auf Hover mit CSS

Question

Ich weiß, dass diese Frage zuvor gestellt wurde (here und here), aber aus irgendeinem Grund kann ich nicht meine Arbeit mit den gleichen Techniken zu arbeiten. Grundsätzlich, wenn Sie über diese schweben,

Sie sollen diese:

By the way, wenn es ein einfacherer Weg, dies zu tun, ohne ein neues Bild geladen, wenn schwebend, lass es mich wissen, bitte.

Hier ist, was ich versucht:

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 Fiddle-Link:

https://jsfiddle.net/ot8a5oba/

Sie, dass t sehen Die Breite und Höhe verwirren mich auch - ich bin mir nicht sicher, wie ich sicherstellen kann, dass es die gleiche Größe hat und dass es oben erscheint. Danke im Voraus!

Answer 1

Ich würde es so machen mit einem Pseudo-Element, um ein Overlay anzuwenden. Vereinfacht die Dinge ein wenig.

.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>