How can I make smaller images on my Webflow portfolio pages expand to a larger scale when clicked on, like a pop-up window?
TL;DR
- Drag in a Lightbox element or wrap existing images with a Lightbox Link to enable click-to-expand functionality.
- Add full-size images in the settings, optionally group them for a cycle-through overlay, and style thumbnails as needed.
To create clickable images that expand in a pop-up (lightbox-style) on your Webflow portfolio pages, use the built-in Lightbox component or convert regular images into lightbox functionality.
1. Use Webflow’s Built-In Lightbox Component
- Drag the Lightbox element from the Add panel into your design.
- Inside the Lightbox, replace the default image with your desired thumbnail.
- Select the Lightbox and in the settings panel, add your full-size image as the lightbox media.
- When the thumbnail is clicked, it will open the full-size image in a modal-style overlay.
2. Convert an Existing Image to a Lightbox
- If you’ve already added images and want to enable the lightbox effect:
- Wrap the image inside a Lightbox Link element.
- In the settings for the Lightbox Link, add the full-size version of the image to the Media field.
- Optional: Set a Lightbox Group name if you want to allow users to cycle through multiple images in the same overlay.
3. Use Lightbox Groups (For Multiple Images)
- Assign each lightbox to a shared group name in the element’s settings.
- Users can then click through all grouped images in the lightbox overlay without closing it.
4. Style the Trigger Image
- You can resize the thumbnail freely using Webflow layout tools.
- Use object-fit: cover or contain as needed to maintain visual integrity.
5. Optional: Use a Custom Modal for Complex Layouts
- If you need more control (text, buttons, etc. in the overlay), consider:
- Creating a hidden div block (modal) with the full-size content.
- Use interactions to show/hide the modal when the image is clicked.
- This approach requires manually building the open/close system and is more advanced.
Summary
Use Webflow’s Lightbox component for the easiest way to make thumbnail images expand to full size in a pop-up-style overlay. You can also group images or build a custom modal for more advanced needs.
