Streaming live at 10am (PST)

Background clipping

Hi, I’m trying to do a “Next project” section in my CMS template page.
I wanna create something like the last section you see here Example (bottom).
I really like the design of this and I would like to add something similar to my website.

I added webkit-background-clip: text and it worked for the text, but not for the circle that follows the cursor.
So, I looked at the code of the website linked above and found something:

  • There are two divs, one with the image and one with the text and cirle
  • The image has a clip-path: url(#text-1) property
  • The div with the text and the circle is clipPath id=text-1

So, from this I’m assuming that theclip-path property of the image is referencing the id text-1 as an SVG image, even if it isn’t.

I’m probably wrong, but if this is the method they used, I would like to know how to implement this in Webflow.
Maybe there’s an easy solution I don’t know, just wanted to ask here if anyone could help me.
Thanks! :thinking: