▼
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