Archived topic

CSS conflict with secondary product image display on hover

6 replies · Started by Raul on June 11, 2020

Viewing posts 1–7 of 7

June 11, 2020 at 8:20 pm #1324458

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!

June 12, 2020 at 4:01 am #1324822

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;
}

June 12, 2020 at 8:51 am #1325272

Works perfectly!

Thanks so much

June 12, 2020 at 9:14 am #1325297

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/

June 12, 2020 at 12:17 pm #1325493

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

June 12, 2020 at 12:25 pm #1325504

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.

June 12, 2020 at 12:57 pm #1325550

Glad to hear :)

This archived topic is closed to new replies.

Start building better websites today.