Is it possible to enlarge an image to its full view when hovering or clicking on it in Webflow? If so, how can I achieve this?
TL;DR
- Use the Interactions panel to apply a scale transform (e.g., 1.1) on hover and revert on hover out with easing for smooth transitions.
- For click enlargement, create a fixed-position modal with a hidden display, then show and animate it on image click, including a close button to hide it again.
Yes, you can enlarge an image on hover or on click in Webflow using built-in interactions and modal techniques. Here's how to do both options.
---
1. Enlarge Image on Hover
Use this approach to make the image scale up slightly as users move their cursor over it.
- Select your image on the canvas.
- Go to the Interactions panel (lightning bolt icon).
- Click + next to Element Trigger and choose Mouse Hover.
- Choose On Hover, then create a new timed animation.
- In the animation, add an action: Transform → Scale, and set scale to e.g., 1.1 or 1.2.
- Under Hover Out, create a separate animation that scales the image back to 1.0.
- Use easing and duration for smooth transitions (e.g., 200ms, ease).
---
2. Enlarge Image on Click (Modal Lightbox Method)
To show the image in full size over the page when clicked (like a lightbox), use a modal-style setup.
- Add a Div Block that covers the whole page, position it as Fixed, width/height 100%, and set z-index higher than other elements. Call it “Image Modal”.
- Inside this modal div, place another Image Element that will display the enlarged image.
- Set the parent modal’s Display: None to hide it initially.
- Select your thumbnail image and go to Interactions panel.
- Set a Mouse Click (Tap) trigger.
- Create a new timed animation to set the modal’s Display: Flex, opacity 0 → 100%, and optionally scale the image up for a popping effect.
- Add a close button inside the modal (e.g., an X icon), and assign it a click trigger to animate modal opacity back to 0% and Display: None.
- For dynamic sources, use CMS → Lightbox Component, which provides built-in click-to-enlarge functionality for CMS images.
---
Summary
You can enlarge images in Webflow either by using hover interactions with scale transforms, or by building a full-screen modal popup to show the full image on click. Both methods require minimal setup using Webflow’s native Interactions panel.