Streaming live at 10am (PST)

How to create a transparant text OVER an image

#1

Hello,

I want to create something similar to this:

I know there are similar people who are asked this already but I couldn’t really find an solution.

help me :frowning:

#2

You should at least share the URL where you viewed this effect.

I suspect it is just a background image that was created in graphic program because of the SPLIT (white left) in this case. Can’t tell unless you share.

#3

Wasn’t there a tutorial shared a while ago doing this with a background video, with CSS?

#4

I’m trying to create this type of effect

How do you do it?

#5

Yup this seems like the video effect.
Here’s a post where this was mentioned a while ago Can you add a stroke to text?. I’m not sure where the video was mentioned?
Take a look at the code (right click, ‘inspect’ on chrome) on that page and see how it was built.

#6

@ezra You can review the code on the page and see what they are doing. Use devtools in your browser. You should be able to do this in webflow. Just break it down in parts. For the title that moves and reveals the image underneath, they have two containers, a left and a right. mix-blend-mode: lighten; is the text reveal side. A transform with transitions makes the magic happen.