Partial text on image

How I can achieve that kind of layout? :thinking:I’ve tried with z index but somehow I can’t create that kind of layout

Webflow unicorns help :unicorn:


Here is my site Read-Only: LINK Our Work Section
(how to share your site Read-Only link)

Hey @Michal_Ondycz :wave:

There are quite a few ways to achieve this, I would say using Grid 2.0 is the easiest way in my opinion as it’s super easy to manage how it looks on tablet and mobile too.

Here’s a short video explanation.
CloudApp

Any questions, please reach out.

First of all, thank you very much for your help @magicmark :man_bowing:

I almost did the layout; however, I have one little issue regarding the image size. I would like to have an image size similar to what I’ve uploaded. In the designer view, the image is OK but on the website its not.

The layout which I am building is in the Our Work Page

Worth to mention it is a collection list item

You would need to set the parent container to an explicit height, and also not stretch the image in the grid… using an image you would need these settings to make sure the image stays in proportion:
CloudApp

However I would recommend using a div with the background image pulled in from the CMS to make everything look as uniform as possible. Keep the Grid as simple as you can. 4 columns all equal is simple enough rather than resizing tracks.

CloudApp

Thank you @magicmark
I did like you recommended

Everything work perfectly

Have a nice day :slight_smile:

1 Like