0

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:

enter image description here

Giuls
  • 570
  • 11
  • 33
  • If you are using pure css for hover effect, how are you going to reference individual image (to be used on hover) for each product? Are you going to create different css rule of each product? – zipkundan Nov 14 '18 at 16:26
  • Yes, different CSS rule for each product. I am open to other solutions, this is just what I can think of. – Giuls Nov 14 '18 at 16:28

3 Answers3

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>
    <a href="/shopnew/?add-to-cart=1394" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="1394" data-product_sku="" aria-label="Add “Spicy Teriyaki Turkey Jerky” to your basket" rel="nofollow">Add To Box</a>
    <a class="xoo-qv-button" qv-id="1394"><span class="xoo-qv-btn-icon xooqv-search xoo-qv"></span>Learn More</a>
</li>
D Hiskett
  • 73
  • 10
  • @D Hiskett - Your first example has helped! The image is now showing infront on hover. Now just to change the size ratio. How would this be done? – Giuls Nov 14 '18 at 15:53
  • The issue you have is that the background image is being applied to the parent element, which is a different size to the image element. You may need to use my second example, see it in action here: http://jsfiddle.net/g5u4Lbxn/. I've updated my answer to include this example – D Hiskett Nov 14 '18 at 16:23
  • In your second example, do I need my original CSS code in addition to your example? It's having the same effect as before for me. – Giuls Nov 14 '18 at 16:32
  • No, you'll need to remove the background-image on hover for the li element, and move that to the :before selector for the image container element. If you haven't done so, you need to add a container
    to the element, as :before will not working on an element
     – D Hiskett Nov 14 '18 at 16:42
  • I've added an example of the HTML structure you will need on the product elements to my original answer – D Hiskett Nov 14 '18 at 16:48
  • 1
    Appreciate you helping out. I've tried what you said above in a Fiddle [http://jsfiddle.net/kxo23uem/](http://jsfiddle.net/kxo23uem/) but it's not changing at all. Is this what you meant? – Giuls Nov 14 '18 at 18:48
  • You were very nearly there, you were using a ul selector in CSS but there is no ul in the HTML. I removed this, and also changed the relative rule to be on the image container, as this is the parent of the :before element, and all worked as expected. I've updated the jsfiddle: http://jsfiddle.net/kxo23uem/1/ – D Hiskett Nov 15 '18 at 08:32
0

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

awtrimpe
  • 56
  • 4
0

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.

indy1172
  • 21
  • 4
  • Hi @indy1172 Thanks for replying. I tried this, it very nearly works! Just the positioning of the secondary image is slightly off. It appears below. Any ideas? https://ibb.co/WK6cpC4 – Giuls Jun 05 '19 at 13:47