Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Second Image on Hover

  • Hi,

    I’m having an issue that the second image on hover, the image is transparent so it looks broken on hover. I’d rather not have to go through and add a background to all of my second images.

    Is there any way to either a) add a white background on the second image on hover with CSS so the first image isn’t shown or b) have the image zoom in instead of hover like the single product view?

    Let me know, thank you!

  • Hi there,

    Option A is possible using CSS. Could you provide a link to the page?

  • Yes, here, you can see the second two products have the issue:

  • i think the issue is because of the picture tag you are using, I don’t think WC supports it yet.

    You can either try disable the picture tag in your image optimization plugin, or try this CSS:

    .woocommerce ul.products li.product a img {
        background-color: #fff;
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.