Cursor blending mode DIfference

Design help Animations & Interactions
1

Hi!
I’m trying to use the blending mode difference on my cursor, just like in this project
https://cursor-blend.webflow.io/
but I can’t get it to work.

Here is a read-only link: https://preview.webflow.com/preview/kather-agency-fb305e?utm_medium=preview_link&utm_source=designer&utm_content=kather-agency-fb305e&preview=4ebae4b232202a3f5ed59181789502a4&mode=preview

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

2

Hello @David_Pastor,

So to make your cursor work first you need to set the cursor element to display flex, change its opacity from 0 to 100, change the color or the cursor dot to white, and on the custom code apply the css styles to the cursor class, not the cursor-dot class. Also you might want to apply a pointer events none to your cursor so you can click on your links. It should look like this:

<style>
   .cursor {
		mix-blend-mode: difference;
    pointer-events: none;
  } 
 </style>

I hope this helps!

3

hi Pablo_Cortes thanks for your help!
I made the changes you suggested but it still doesn’t work.

4

Hey @David_Pastor, that is weird, it worked for me. So now it looks that you removed the embed element from your cursor. So I did a quick video Loom | Free Screen & Video Recording Software | Loom All I did was adding an embed element on your cursor with the code I posted above and changed the opacity of the cursor to 100%. Let me know if you have any issues.

5

Hi @Pablo_Cortes , would you mind to have a look at my share read only? I did the same as in your Loom and it doesn’t work. Thanks a lot.

6

I have found the problem: I didn’t set a color background to my section! Now it works. Thanks

1 Like