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

Home Forums Support CSS conflict with secondary product image display on hover

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1324458
    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!

    #1324822
    David
    Staff
    Customer Support

    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;
    }
    #1325272
    Raul

    Works perfectly!

    Thanks so much

    #1325297
    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/

    #1325493
    Leo
    Staff
    Customer Support

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

    #1325504
    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.

    #1325550
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.