Cursor blending mode

Design help Animations & Interactions
1

Hi!

I’m trying to have a cursor with the blend mode difference so that it inverts on hovering over specific elements but I can’t seem to get it right. I followed these guidelines and this project by @avivtech but I cant seem to find why it doesnt work.

Here is a read-only link: https://preview.webflow.com/preview/portfoliohessel?utm_medium=preview_link&utm_source=dashboard&utm_content=portfoliohessel&preview=bc92f4239e676bbda33ad7572d897c90&mode=preview

I’m very new to webflow and webdesign in general so any help would be greatly appreciated!

Here is my public share link: https://portfoliohessel.webflow.io/
(how to access public share link)

1 Like
2

@Hessel_de_Ronde Have you added the custom CSS to your website?

1 Like
3

Hi Matthias!

Thanks for your quick reply! I added the following piece of code to the Head Code:

<style>
  /* Blend modes */

.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>

And then I try to add mbm-difference as a class to the cursor element in the designer, and I also tried to add it like this:

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

But both don’t seem to work?

4

Try this:

<style>
.cursor-wrapper {
mix-blend-mode: difference;
}
</style>
2 Likes
5

Awesome! That worked! thank you :slight_smile:

6

Interesting. Could it be that blending mode works only for siblings of the “blended” element? Therefore it doesn’t work for cursor element inside the parent wrapper where nothing but this cursor is?