Woocommerce change product image on hover with CSS - html

Question

I am trying to change the product image when the user hovers over it, with pure CSS, on the Woocommerce product archive page.
In my CSS I am targeting the individual product for hover and covering it with the second image stored in my Woocommerce product image gallery.
My code partially works. When I hover over the product image, the second image is displayed, but it is behind my original image and the size ratio is wrong. I have tried using z-index:9999 but it is having no effect on the ordering.
How can I change my original product image with my second image when user hovers on it?
Here is the webpage showing below incorrect hover behaviour. CSS only enabled for the first product:
Link
My Code:
/* Selecting the individual product image */
.post-1394.product.type-product.status-publish.has-post-thumbnail.product_cat-protein.first.instock.shipping-taxable.purchasable.product-type-simple:hover {
/* Replacing the product image with my secondary image from gallery */
background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg)
no-repeat;
z-index: 9999;
}
Screenshot of result when hover over product:

Answer 1

This is because you're using a background-image on the <li> element, as opposed to the <img> element itself. Because this is a parent element of the image, the background will never be shown above the image itself.
If you would like to keep the background image on the parent element, you could simply add a rule of opacity:0; for the child <img> element on hover.
e.g.
.product.type-product:hover img {
opacity:0;
}
This will set the image opacity to 0 when you hover over the parent <li> element.
Another option you have is to add a container to the <img> element, and use a :before selector on that container element with the secondary image as the background image.
This would look something like:
ul.products li.product img {
position:relative;
}
ul.products li.product .product-image-container:before {
content:"";
display:none;
background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) no-repeat;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
And then show the before on hover of the parent:
.product.type-product:hover .product-image-container:before {
display:block;
}
See an example of this here:http://jsfiddle.net/g5u4Lbxn/
Most browsers don't support the :before selector on images, so you'll need to add a container element for the image
With the image container element, the HTML for that particular <li> element should look like this:
<li class="post-1394 product type-product status-publish has-post-thumbnail product_cat-protein first instock shipping-taxable purchasable product-type-simple">
<h2 class="woocommerce-loop-product__title">Spicy Teriyaki Turkey Jerky</h2>
<div class="product-image-container">
<img width="324" height="324" src="https://proteinandpantry.com/wp-content/uploads/2018/09/TurkeyJerky-324x324.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image">
</div>
<div class="star-rating">
<span style="width:100%">Rated <strong class="rating">5.00</strong> out of 5</span>
</div>
<span class="price">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2.50</span>
</span>
Add To Box
<a class="xoo-qv-button" qv-id="1394"><span class="xoo-qv-btn-icon xooqv-search xoo-qv"></span>Learn More</a>
</li>

Answer 2

The problem is that the original image is an image tag instead of being the background. What you are doing is adding a background behind the product div which is going behind the whole product, including the image for it. There isn't a way to replace the source of an image with CSS, but you can do it with Javascript. Replace image by javascript

Answer 3

I'm late to the party... but this works
/* wooCommerce product page image hover / change image * <--- just do this once/
.product.type-product:hover img {
opacity :0;
z-index: -1;
}
/*Bezel Set Emerald Ring #6489* <--- you will need to do this for each post/
.post-6489 .fusion-image-wrapper {
background-image: url("https://www.caesarsdesigns.com/wp-content/uploads/2019/05/emerald02.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 223px 224px;
}
Where 223px 224px is the size of the img container.