[Resolved] CSS conflict with secondary product image display on hover

[Raul]

Hi guys,

When I add this code:

.woocommerce ul.products li.product img,
.woocommerce ul.products li.product img .secondary-image{
    -webkit-filter: saturate(0.9) brightness(105%) contrast(101%);  /* Opera, Chrome, Safari */
    filter: saturate(0.9) brightness(105%) contrast(101%);
}

The secondary WooCommerce product image doesn’t get displayed on mouse hover. I guess the problem is the primary image is not affected by opacity=0, correct? Any idea how to solve it?

Also, if I remove this code and the secondary image does not have exactly the same dimensions of the first one, the first is still visible on the background.

Thanks!

[David]

Hi there,

not sure but you can try using this CSS:

.wc-has-gallery img:hover {
    opacity: 0 !important;
}

.wc-has-gallery .secondary-image:hover {
    opacity: 1 !important;
}

[Raul]

Works perfectly!

Thanks so much

[Raul]

Oh, actually it is giving some errors on the Product Detail page on the image gallery, zoom on hover and related products thumbs

Do you mind taking a look please?
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/sin-titulo-na9/

[Leo]

What is the issue here? Which block of CSS is causing the issue?

[Raul]

Hi Leo,

I was able to make it work!

I added

.post-type-archive-product

to David’s code to target the product archive only.

[Leo]

Glad to hear 🙂

[Author]

Posts