How can I make a Webflow gallery where hovering over a product enlarges it and clicking the product reveals more information, with the product remaining enlarged if it has been clicked?
TL;DR
- Structure a Collection List/Grid with each product inside a
divcontaining an image and hidden text block for details. - Add a hover animation to scale the image to
1.1and reset on hover out. - Create a click animation to scale the image further (
~1.15), reveal the text block, and toggle back on a second click. - Prevent conflicts by ensuring hover-out doesn’t affect clicked items and using "Limit to Sibling Elements" in Webflow.
- Test to confirm hover enlarges, click keeps it enlarged with details, and second click resets.
You can achieve this in Webflow using hover and click interactions with a combination of CSS scaling and custom IX2 animations. Here’s how to set it up:
1. Structure the Gallery
- Add a Collection List or Grid to hold the product items.
- Each product should be inside a div container (
product-item). - Inside each
product-item, add: - Image element (
product-image). - Text block for additional product info (
product-info), set to hidden initially.
2. Create Hover Interaction (Enlarge on Hover)
- Select
product-itemand go to Interactions > Mouse Hover > Add Animation. - For Hover In, add a Scale effect:
- Target:
product-image. - Scale to:
1.1(or desired size). - For Hover Out, reset the scale to
1.0.
3. Create Click Interaction (Keep Enlarged & Show Info)
- Add a new Click animation on
product-item. - For First Click:
- Scale
product-imageto ~1.15 (slightly bigger than hover). - Show
product-info(change opacity from0to100%). - For Second Click (to collapse):
- Reset
product-imageto1.0. - Hide
product-info(change opacity back to0).
4. Prevent Conflicts Between Hover & Click
- On the first click, disable the hover-out animation by setting it to affect only items that are not currently clicked.
- Use Webflow's "Limit to Sibling Elements" so it only affects the clicked item without affecting others.
5. Test & Publish
- Preview the interactions to ensure that:
- Hovering enlarges the product.
- Clicking keeps it enlarged and reveals info.
- Clicking again resets the item.
Summary
You achieve this effect by structuring your gallery with div containers for products, applying Scale interactions on hover, and using Click animations to maintain the enlarged state and reveal more details. Adjust animation easing for smooth transitions.