Webflow sync, pageviews & more.
NEW

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 div containing an image and hidden text block for details.
  • Add a hover animation to scale the image to 1.1 and 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:

  • 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-item and 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-image to ~1.15 (slightly bigger than hover).
  • Show product-info (change opacity from 0 to 100%).
  • For Second Click (to collapse):
  • Reset product-image to 1.0.
  • Hide product-info (change opacity back to 0).

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I implement horizontal scroll when scrolling over a div in Webflow?
How can I remove the "test mode" box that appears on my Webflow published site?
How can I add a high resolution picture on the front page of my Webflow site that resizes automatically on different devices?
How can I make this code work on my Webflow page? I've tried adding it to the footer in project settings, the specific page's footer, and an embedded code element, but it's not showing on the published site.
How can I access the Webflow Editor to begin entering content in my custom CMS Collections templates? I can't sign in on the login page because it says I am the site administrator, but I don't see a sign-in option on the General tab in Site Settings.
How can I increase the space between text and underline in Webflow, and can the line thickness be adjusted as well?
How can I export and host a website built on Webflow and make a form work to send details to my client's email instead of using Webflow?
Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
How can I add a color property to my Webflow div element that can be independently changed across instances?
How can I create a table in Webflow that looks good on both desktop and mobile devices?
How can I create a table of contents for my Webflow blog posts like the one shown on this example blog post?
How can I change the video in a video player using a button or thumbnail in Webflow?
What is the process for uploading and hosting CSS and JS files on Github for file management and updates in Webflow, if the desired plugin is not available on Github?
How can I export and integrate the blog collections from my Webflow website to create a fully functional static website?
Why is the SVG icon I created in Adobe Illustrator blurry when uploaded by the Webflow developer team?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?