Collection - Add a hover effect to product images on your collection pages

Store Design

Topic summary

Add a hover effect to product images on collection/home pages to reveal an alternate image or custom text. Requires editing theme CSS and product image snippets (Liquid) to wrap images in a “reveal” container with a hidden element that fades in on hover.

Key steps and fixes:

  • Add the Reveal module CSS (from GitHub); some themes need selector changes (.product-card for Debut, .product–wrapper for Brooklyn). If images duplicate, ensure you replaced the original img markup and included the CSS; otherwise hover won’t work.
  • Brooklyn: modify product-grid-item.liquid, duplicate the lazyload image and use product.images[1] as the hidden image; ensure proper Liquid condition spacing (avoid “Unknown operator blank” errors by spacing around == and variables).
  • Debut: use theme-specific CSS and selectors; multiple users report success via a linked video tutorial.
  • Venture: edit product-card.liquid, remove the “View” overlay, and prefer transition: all for smoother fade.

Common issues: doubled/overlaying images, faded/low-visibility thumbnails, search page Liquid errors, mobile duplicates, missing price/description after edits.

Status: No single official solution; community-supplied, theme-specific implementations. Attachments (GIF, screenshots) and video guides are central. Unresolved for Boundless, Supply, Mobilia, and some Debut variants; requests remain for product-card-grid.liquid guidance.

Summarized with AI on January 4. AI used: gpt-5.
3

Hi Tyw

Thanks for the tutorial.

Do you think a similar approach could be applied to add a text box hover on a non-product image?

Would you be so kind to provide a way forward that I can try to add a box hover with text over regular images on my homepage? Or even pointing me in the right direction would be great too!

I am using Brooklyn.

Thanks

Josè Luis

2 Likes