Image to Appear Over Image on Hover With CSS - html

Question

I know this question has been asked before (here and here), but for some reason I can't get mine to work when using the same techniques. Basically when you hover over this,
You should get this:
By the way, if there's a simpler way to do this without loading a new image when hovering, please let me know.
Here's what I tried:
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/
You can see that the width and height is also confusing me - I'm not sure how to make sure it stays the same size, and that it appears on top. Thanks in advance!

Answer 1

I would do it like this using a pseudo element to apply an overlay. Simplifies things quite a bit.
.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>