Anyone have any tips on creating something like this?

[jwburkhard (John Burkhard)]

I’m looking to replicate this effect where an image is wrapped with these lines. Normally I would set the image as a span and use the :before pseudo class to create the element. With the lack of span and pseudo controls in Webflow, I’m not sure how to achieve the same affect.

Any advice, ideas or hacks that you can think of would be great.

Thanks!

[vincent (Vincent Bidaux)]

You mean this layer superposed to an image?

Make a transparent version of this layer, then 2 solutions:

1. make a div, add the image as a background, add this layer as another background on top of the first
2. make a div, give it position:relative, add the image, add the layer, make it position absolute, corner top left, and it’s over the image

You can also skip the “make a transparent version of your layer” by using solution 2 with custom code and CSS blend mode (try overlay, multiply and screen.

Basics of CSS Blend Modes | CSS-Tricks

I’m not even sure I understood your question

[samliew (webflowexpert.com)]

You need a minimum of 3 divs:

Here’s how I would do it in Webflow:

[jwburkhard (John Burkhard)]

Thanks, for some reason my brain was thinking in divs, lol.