How can I create a lightbox hover effect with text in Webflow similar to the example shown in the tutorial?
TL;DR
- Create a relatively positioned container with an image or Lightbox element inside.
- Add an absolutely positioned overlay div with centered text and initial opacity set to 0.
- Use hover interactions on the container to animate the overlay’s opacity to 100% on hover and back to 0% on hover out.
To create a lightbox hover effect with text in Webflow—similar to the Webflow University tutorial—you'll need to use a combination of div blocks, images, hover interactions, and text overlays.
1. Build the Layout Structure
- Drag a Div Block into your canvas; this will act as the Image Container.
- Give it a class like "Lightbox Hover Item" and set a width and height (e.g., 300x300px).
- Set Position to Relative (so overlay elements can be absolutely positioned inside).
- Drag an Image into the Div Block and assign your image.
- Add another Div Block inside the same container to act as the overlay. Give it a class like "Hover Overlay".
2. Style the Overlay and Text
- Set the Hover Overlay div to:
- Position: Absolute (top: 0, left: 0)
- Width and Height: 100%
- Background: rgba(0, 0, 0, 0.5) or a color of your choice
- Display: Flex, Align: Center, Justify: Center to center the text
- Opacity: 0 initially to hide it
- Drag a Text Block or Heading inside the overlay and style it (e.g., white text, large font).
- Name this text element something like "Overlay Text".
3. Create the Hover Interaction
- Select the image container (e.g., Lightbox Hover Item).
- Go to the Interactions panel (lightning bolt icon).
- Create a Mouse Hover interaction:
- On Hover → add a timed animation:
- Target the Hover Overlay
- Set Opacity to 100%
- Add smooth easing and duration (e.g., 200ms ease)
- On Hover Out → add another animation:
- Set Opacity back to 0%
4. Make It Work With Lightbox
- Instead of a static image, you can use the Lightbox Element:
- Drag a Lightbox component inside the same container.
- Apply relative positioning to the container and absolute overlay as before.
- The overlay and hover effect structure remain almost identical.
- If you're using the Lightbox Link, make sure it wraps the image and overlay.
Summary
To create a lightbox hover effect with text in Webflow, structure your layout with a relatively positioned container, an image or lightbox inside it, and an absolutely positioned text overlay. Use hover interactions to fade the overlay in and out for the desired effect. This setup enhances the visual experience and maintains full interactivity.