How to recreate cards with negative margin titles?

I constantly see this design on the webflow library, and i’ve used it in my figma sketch up, but i’ve spent the last 30 minutes trying to figure out how the hell to recreate this in webflow.

I initially thought grids and div blocks, but it doesnt cover the top image completely, just by a little, and to my knowledge thats not possible with grids. Any help?

Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.

Hello, the reason i did not provide a read-only link is because i do not have one. The image i added is not from my webflow page, its from figma. My question was how to make this in webflow, as i do not know how. I only know how to make them (image and seperate text) on top of eachother with a flexbox using a div block. Although, since the post i have managed to do it, but i’m not sure if its correct. Although my point still stands as to why i did not include one in the original post.

Here is my link. I did it, but i’m not sure if its the correct or best way to do it.

Forgive my classes and design layout, just came across first client 2 days ago, and am having a hard time adapting ahahah.

There are many ways to create this but I see

  • Grid of 3 cols, i row
  • In each cell, a wrapper div, flex vertical, contains
    • your image
    • your div containing the text, set a negative top margin on this to create the overlap

I created an example read-only of a card where an element has a negative margin.

Here is a published link. Cards with Negative Margin Titles

Thank you for your comment. I’ll certainly keep that in mind. You’ve been great help to me recently!

Thank you for your comment, it seems i have done the correct thing.