How to interweave text and imagery in Figma & Webflow

What we're creating:

Figma tutorial

We're dealing with 3 layers

To make this happen all we need is the image, the text placed on top of that image and and a duplicate of that image with the isolated overlapping parts visible.

1) Create a frame, add the image and position some text on top

Position the text and image in such a way that anticipates which parts of the image you want overlapping the text.

2) Isolate the overlapping parts

Feel free to use any background remover that will allow you to target specific parts of an image. I used Photoshop.

Here's what I did:

• Enable quick selection tool and select the parts you want isolated
• Create a mask from your selection
• Export as PNG

‍

Here's what I ended up with

3) Overlay the isolated image

Make sure the isolated image has the same exact position (same x and y values) as the original image.

4) Make it responsive

If needed, feel free to add constraints to the text and imagery to make the layout responsive.

You can also add auto layout if the layout is going to evolve

Break text alignment like I did by wrapping individual rows of text in auto layout frames and adding unilateral horizontal padding. Play around with it.

Done!

Definitely an odd layout but it was inspired by some edgy (but super beautiful) poster design so what did I expect? 🤷

‍

Webflow tutorial

1) Add a section and a background image

Set the size to 'Cover' and centre it. Turn off tiling and make sure it's not fixed.

Enable position relative for the section. It'll allow us to then overlay the isolated flower image.

2) Add text to the section

3) See Figma steps above for how to isolate parts of the image

4) Add the isolated flowers as an image element to the section

Give this image a position of absolute and make sure you have the following settings in place:

• Width and height at 100% (the section being its parent)
• Fit: Cover
• Top, Left, Right, Bottom absolute properties all at 0%

5) Space text elements as desired

We can no longer interact with text though 🤔

The image that sits on top of the text prevents users from being able to to highlight text with their cursor.

We need to force the cursor to ignore this image and click "through" it.

Webflow's 'Cursor: None' doesn't work 😦

All this does is hide the cursor on hover. Not going to work for us.

We need 'pointer-events: none' which is not built into Webflow's no code UI. We'll have to add some custom code.

6) Add custom code – 'pointer-events: none'

Add the following to an embed or to the body:

.element-class {

pointer-events: none;

}

Users should now be able to click through the top image and interact with the underlying text.

Done!