How can I place a text with a link on top of each image in my Webflow layout that was created using a grid?
TL;DR
- Wrap each image in a relative-positioned div within the grid cell.
- Add a 100%-width image and an absolutely positioned link block inside the div to overlay text, then style for visibility and repeat for each grid cell.
To place text with a link on top of each image inside a Webflow grid layout, you'll need to use absolute positioning within a relative parent element. Here's how to do it:
1. Wrap Each Image in a Div Block
- Place a Div Block inside each cell of your grid layout.
- Use this Div as the parent container for both the image and the overlaying text.
- Set the Div’s position to relative (Style panel → Position → Relative). This is important to allow absolute positioning of child elements within it.
2. Add the Image
- Drag an Image element into the Div Block.
- Set the image width to 100% to make it responsive inside the div.
3. Add a Link Block for the Overlay Text
- Drag a Link Block (or a Text Link, depending on design needs) into the same Div Block.
- Give it a class like “Image Overlay”.
- *_Set position to _absolute*** and place it, for example, at top left, center, or **bottom center** using the position tools (e.g. top: 0, left: 0).
- Adjust padding/margin, font, and color to style the text.
- Add your link text directly into the Link Block, and set the destination URL in the Link settings.
4. Style for Visibility
- To improve visibility of the text:
- Use background-color with some opacity (e.g., black with 70% opacity).
- Use white text for contrast.
- Optionally, apply hover interactions or transitions to animate the overlay.
5. Repeat for Each Grid Cell
- Duplicate the styled div into each grid cell and replace the image and link text/URL as needed.
Summary
Wrap each image in a relative-positioned div, overlay a link block with absolute positioning, and style it accordingly. This allows the text link to appear directly on top of each image in a Webflow grid layout.