Text and link on top of images in a grid

Hi there

I have made a layout from a grid (cause I like my images to have different proportions) Now I like to put a text with a link op top of each images, but I cant figure out how? Cause when I drag a div-block on to the grid it pushes the image instead of going on top.
And if I should use another method than grids, also please let me know.

Thanks
Kim


Here is my site Read-Only: Webflow - Krogh arkitektur

Hey @KimHougaard ,

to achieve what you want, you need to expand the structure of your grid a bit.

  1. instead of placing the images directly in the grid, use divs (e.g. with the class grid_image-wrap) and place the images in these divs. Important, the div should be set to position: relative;.

  2. add another div to each grid_image-wrap and name it for example grid_image-content. Set this to position: absolute; with 0% top 0% right 0% bottom 0% left.

  3. in the grid_image-content you can add anything you want, like an image title and link.

Here is a picture of what this could look like:

I hope this helps you. :slight_smile:

Greetings from Germany,

Dennis

1 Like

Hi Dennis, Thank you very much for your help thats exactly what I was looking for I think.
However I cant get it look like yours. When I put in a div set to absolut the image jumps out of the grid and place itself in the upper left corner of the page… hmmm. Could you try to send me a screendump where you have the div “grid_image-wrap” chosen, so I can see your settings in the right?
Thanks
Kim

Glad I could help @KimHougaard!

The reason this happened to you because you didn’t set the grid_image-wrap to position: relative;. You will probably need this very often, so I recommend the following, really well explained video from Webflow:

And of course here is the screenshot:

Happy weekend to you!

Thats great thank you very much. And also great with the video and yes your are right its about understanding the different position possibillities which can be hard.

Kim

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.