X Ray Effect Under Cursor Hover

Hi Guys,

I was wondering if it was possible to create such animation effect in Webflow?

Thank you


Here is my public share link: LINK
(how to access public share link)

Hi Adam,

short answer: yes!

You can see parts of it in an amazing rebuild of the Plink website:

https://webflow.com/website/Plink-Webflow-Rebuild

There is a small piece of custom code for the text effect being used there (check under page settings).

The magnetic cursor follow effect and those other hover effects could be achieved natively with webflow interactions.

Hi Chist, thank you very much.
Yes, there is a tutorial from Webflow itself where they show how to build such cursor. So I believe if I tried to recreate it with this code everything should work perfectly.

Maybe you also know how to X ray a layer below the cursor so that you could see the layer which is below? For example 2 layers set to absolute positions, and so when you hover over the upper layer you could see the one below.

Thanks again,
Adam

You are welcome!

Never tried it myself. I did a quick search on the showcase and found these two projects that might include what you are searching for:

https://webflow.com/website/Hover-to-reveal-Mask

https://webflow.com/website/Native-Image-Masking

2 Likes

hooo, yeah!! that’s awesome Man. thank you so muchhh :star_struck: :grin:

Hey there - I found this Idea really inspiring. I am struggling for a while though to make this work INSIDE A SECTION only - so not full page. I want to have this “X Ray Effect” on one of the page elements, like my design below, but not have it on the whole page…
Any help would be highly appreciated!