How can I overlay text on an image in Webflow while maintaining the same dimensions as the image for hover effects?
TL;DR
- Wrap the image and overlay text inside a position-relative container with 100% width image.
- Add a position-absolute overlay Div inside the container, center the text using Flexbox, and use opacity transitions on hover for effect.
To overlay text on an image in Webflow and ensure the overlay matches the image dimensions for hover effects, use position styling within a container. Here's how to do it:
1. Create the Container Structure
- Drag a Div Block onto the canvas. This will serve as the container for your image and overlay.
- Set the container's position to Relative — this defines the boundary for absolutely positioned children.
- Set a fixed width and height, or let the image define the dimensions with 100% width and auto height.
2. Add the Image
- Drag an Image element into the container.
- Set its width to 100% so it fills the container.
- You can set the height manually or let the image scale proportionally.
3. Add the Overlay Text
- Drag another Div Block into the same container. This will act as your text overlay layer.
- Set this overlay Div’s position to Absolute, and anchor it to Top: 0, Left: 0, Right: 0, Bottom: 0.
- Inside it, add a Text Block (or Heading, Paragraph, etc.).
- Use Flexbox (Center-Center) on the overlay Div to center the text.
- Style the overlay Div with a semi-transparent background (e.g., black at 50% opacity) if needed.
4. Add Hover Interaction
- Select the container Div.
- Go to Interactions panel and add a "Mouse Hover" interaction.
- In "On Hover", set the opacity of the overlay/text Div to 100% (fade in).
- In "On Hover Out", set the opacity back to 0% (fade out).
- Also make sure the overlay Div is initially set to opacity: 0% in the Style panel.
5. Ensure Responsiveness
- Set the container and image to scale responsively by using % or VW units where necessary.
- The overlay Div will automatically adjust because it’s 100% of the container.
Summary
To overlay text on an image with matching dimensions for hover effects, wrap both elements in a position-relative container, set the image to 100% width, and layer a position-absolute overlay Div with centered text and hover-based opacity transitions. This ensures the overlay aligns perfectly and responds to hover as expected.