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?

To create a Webflow gallery where hovering enlarges a product, and clicking reveals more information while keeping it enlarged, follow this structure using Webflow interactions and conditional visibility.

1. Set Up Your Gallery Structure

• Create a Collection List if using CMS, or use static elements if manually built.
• Each product item (e.g., a Div Block) should include:
• An image.
• A hidden extra information section (e.g., another Div Block set to Display: None initially).
• A custom attribute or class/state that can be tracked.

2. Create the Hover Interaction

• Select the product block.
• Go to Interactions → Element trigger → Mouse Hover.
• On Hover In:
• Scale the element using "Size" or "Transform → Scale" (e.g., scale to 1.1).
• Use ease and duration (e.g., ease-in-out, 200ms) for smooth animation.
• On Hover Out:
• Use a conditional interaction so it only shrinks the item back if it hasn’t been clicked (see below for logic).

3. Create the Click Interaction

• With the same product block, add an Element trigger → Mouse Click (Tap).
• On First Click:
• Show the hidden info section (set Display to Flex/Block).
• Set a custom state (e.g., add a class like clicked or use a Webflow attribute).
• On Second Click (optional):
• Hide the info section.
• Remove the custom state (to allow shrink on hover out again).

4. Make Enlarged State Persistent After Click

• To ensure the item stays enlarged after click:
• Modify the hover out interaction to check if the element has a clicked class (Webflow doesn't support class-based conditions, but you can simulate it):
  • Instead of using hover out to scale down, create a duplicate scale-down animation and manually apply it only if not clicked.
  • Use Webflow's Interactions panel → Element trigger → Mouse Hover Out, but tie the trigger only to elements without the clicked class (via a wrapper or careful class design).

5. Optional: Use Webflow’s Built-In States (Limitations Apply)

• If not using a custom click tracking system, you can try using Webflow’s “Pressed” states for clicked styling, but it won’t let you toggle or persist interactions easily.
• For more advanced persistence, you may need custom JavaScript to track clicked elements and apply a clicked class manually.

Summary

Create a product element with hover-scale using interactions, and on click, reveal hidden info and add a persistent “clicked” state to keep it enlarged. Use separate interactions to maintain the size change if the item is clicked and to allow hover-out shrink only when not clicked.