White overlay on product hover

  • Resolved champagnecoffee

    (@champagnecoffee)


    5 years, 5 months ago

    When you hover on a product, there is a white overlay on the image. I have removed the ‘shop now’ button which was appearing but I guess this left behind the overlay. Please can someone help me to remove this?

    I used this code to remove the button:

    ul.products li.product .product-button-wrap .add-to-cart-button-wrap .button, .add-to-cart-button-wrap .button {
    display: none;
    }

    I have tried various code to remove the overlay including:

    div.prod-img-wrap:after {
    background: none !important;
    }

    It may be worth noting that I did use the ‘product flipper’ plugin however this is now disabled but the product image is still flipping (which I want.)

    Please can you help,

    Thank you.

    [ Please do not bump. ]

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter champagnecoffee

    (@champagnecoffee)

    I would really appreciate some support on this

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @champagnecoffee, A few things;

    1) If you need urgent support you can consider the theme author’s commercial service; https://themeisle.com/contact/

    Alternatively find another free theme with better support.

    2) If you want to continue using the free theme then you’ll have to accept there is less support. Please do not bump your thread or break the forum guidelines to try to get around that.

    3) Consider learning how to utilise your browser developer toolbars to understand the styles applying to your site.

    4) The solution that I came to using Chrome developer tools is that there is a hover style applied to an after pseudo CSS selector. To override it, add this to your “Additional CSS” part of the dashboard:

    
html .shop-item:hover .shop-item-image:after {
    background: none;
}

    https://developers.google.com/web/tools/chrome-devtools/css/

    Thread Starter champagnecoffee

    (@champagnecoffee)

    @anevins thankyou SO SO much. I have spent weeks trawling the inspect console and trialling and erroring to figure this out. I am a newbie so always try my hardest to figure things out before asking for help.

    This was my problem (for future readers)

    View post on imgur.com

    Which the above code fixed!

    Thanks again and I appreciate your advice on the support forum p I will take heed next time!

    Thread Starter champagnecoffee

    (@champagnecoffee)

    Please could you help me do the above on all product/category pages as you did for the home page?

    Thank you ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Replace the code I suggested with this instead:

    
html .shop-item:hover .shop-item-image:after,
html .product:not(.elementor):hover .prod-img-wrap:before, 
html .shop-item:hover .prod-img-wrap:before,
html .prod-img-wrap:hover:before {
    background: none;
}
    Thread Starter champagnecoffee

    (@champagnecoffee)

    Thank you so much that is perfect! I really appreciate you taking the time to help me.

    I actually used both bits of code in order to achieve the end result I needed: No white overlay on any page (home as well as that specific category pages) and also to remove the ‘shop now’ button on hover on those pages too.

    It seems there is a bit of a glitch with the ‘shop now’ box appearing as you change page and then disappearing.

    Thanks again.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘White overlay on product hover’ is closed to new replies.