Streaming live at 10am (PST)

Masonry image grid with text overlay

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:

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

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

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