▼
Streaming live at 10am (PST)

Masonry image grid with text overlay

Design help General
#1

Hi guys hoping you can help me.

I’ve built a masonry grid that auto-sizes to various images from my portfolio. It’s essentially a bunch of link blocks with image blocks inside them.
I want to create a simple text overlay with the name of the project that reveals on mouse hover.

I understand how to build the interaction, but for the life of me I can’t find a way of simply adding a text layer to each image. Doesn’t seem like it’s possible unless I redo the whole thing with background images in the link block (which sadly breaks the grid).

Can anyone help? Thanks all!

Here is my site Read-Only: https://preview.webflow.com/preview/alis-initial-project-c4c1a2?utm_medium=preview_link&utm_source=designer&utm_content=alis-initial-project-c4c1a2&preview=8388ca069399ccfeebb84275a77e7f58&pageId=5f099d80c0851765da01c2b7&mode=preview

#2

Any ideas on how to place text within/over the images? The interaction is built but I still can’t figure out how to get the text in there.
All suggestions welcome

#3

Hi Ali,
Have you tried setting Thumb to relative and putting inside it a div block positioned absolute and full? This way you could put inside this block text or other elements.

Hope it works
Dritan

#4

Brilliant thanks Dritan you’ve solved it! Now I just need to figure out why the hover over interaction for the image block stops working once the text is added to the containing div

https://preview.webflow.com/preview/alis-initial-project-c4c1a2?utm_medium=preview_link&utm_source=designer&utm_content=alis-initial-project-c4c1a2&preview=8388ca069399ccfeebb84275a77e7f58&pageId=5f099d80c0851765da01c2b7&mode=preview

#5

Hi Dritan! I’m trying out your method, and mine isn’t working quite well. I’m using a masonry grid by setting the container with a typographic grid in 3. I put one of the images in a div block, and inside the div block i added another div block with a text link, doesn’t seem to be working. the image ends up being full screen or off the grid. Do you have any idea where I went wrong? Thanks!

#6

Hi Sulah,

I just saw your post. It depends on how you set relative and absolute in the elements. Could you share a read-only link to your project? You need to set the parent Div to relative and the div inside it to absolute. I am not sure on how this would affect the image inside it if it is set to static. I could tell you more if I could take a look at how you have structured the whole thing.
Cheers

#7

here you go, for the home page - so far i only kept the masonry grid without text. I have a duplicate page called ‘test’ where i’m trying to move things around.

the masonry grid is done by setting the container with typographic columns. thanks!
(the page i sent is the test, but if you press “WORK” or the logo you can go to the actual home page.

#8

Hi Sulah,

You do not need the Div Block 28, Imageholder is going to be enough as a container, and relative is set correctly. I guess the link needs to go on top of the image, just put Textholder inside Imageholder and make it Absolute Full so that it fills the parent container. now you can insert other elements like headings links or icons inside it and will always show on top of the image. With interactions you can you can make this div/layer to show on hover as you wish. Hope this helps.
A little video

Cheers
Dritan