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! 