How can I create a portfolio in Webflow where users can click on an image within a project template page to view a larger version? Additionally, how can I apply a dark shadow to the entire screen when the image is clicked, focusing only on the image?

To create a click-to-enlarge image effect with a dark overlay on a Webflow project template page, you need to use a combination of Lightbox behavior or custom interactions. Here's how to achieve this manually using Webflow's built-in tools.

​

1. Add the Enlarged Image and Overlay Divs

​

• Go to your Project Template page.
• Add a div block for the overlay, and name it something like Image Overlay.
• Set the following styles:
• Position: Fixed (Top: 0, Left: 0, Right: 0, Bottom: 0)
• Z-index: 9999
• Display: None (initially)
• Background Color: Black with Opacity: 80–90%

​

• Inside this overlay, add another div for the enlarged image container, center it using Flex: Center Center, and set a max width (e.g., 90vw by 90vh).
• Inside that, add an Image element and give it a class like Enlarged Image. Leave it empty for now—you’ll set the image dynamically via interactions.

​

2. Set Up the Thumbnail Image Trigger

​

• Select the image inside your project template that you want clickable.
• Give it a class like Thumbnail Image.
• Wrap the image in a div block if not already.

​

3. Create the Show Overlay Interaction

​

• With the thumbnail image selected, go to the Interactions panel.
• Create a Mouse Click (Tap) interaction.
• On First click, add these actions:
• Set visibility of Image Overlay to Display: Flex or Block
• Change opacity to 100% (from 0%) over 0.3s
• Set image source dynamically: Use a "Page load" or "Click" trigger in combination with a JavaScript embed inside Webflow to copy the clicked image's src into the Enlarged Image (see note below)

​

Note: Webflow's interactions can’t natively pass src values between images. To dynamically copy a clicked image’s src, use a simple custom embed code:

- Embed this script on the page using an Embed element:

  - It listens for clicks on .Thumbnail Image and sets the src of .Enlarged Image accordingly

  - Ask if you need help writing this piece—Webflow interactions can’t do it alone

​

4. Create the Hide Overlay Interaction

​

• Select the Image Overlay div and add another Mouse Click (Tap) interaction.
• On click:
• Fade opacity to 0%
• Set Display to None after the fade-out completes

​

5. Style Responsively

​

• Ensure the Enlarged Image has:
• Max-width and max-height for different breakpoints
• Set object-fit: contain for better aspect ratios

​

Summary

​

To display a larger version of a project image on click with a dark screen in Webflow:

​

• Create a full-screen overlay div and an empty image container.
• Use interactions to show the overlay and populate it dynamically when a thumbnail is clicked.
• Enable the user to close the overlay by clicking anywhere outside the image.

​

You'll need a little custom JavaScript to swap the full-size image dynamically, as Webflow interactions don't move or copy src attributes natively.