Streaming live at 10am (PST)

Anyone have any tips on creating something like this?


#1

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!


#2

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.

https://css-tricks.com/basics-css-blend-modes/

I'm not even sure I understood your question :slightly_smiling:


#3

You need a minimum of 3 divs:

Here's how I would do it in Webflow:


#4

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


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.