Change overlapping pixels in css

Question

On some websites, the cursor is some shape, which is easy enough to do, make a div with some css that follows the mouse.

But on some other sites, I see that when the cursor moves, it filters on a pixel by pixel basis depending on what element it is hovering over, eg:

the circle is the cursor. when it's over the red square, those overlapping pixels are cyan, the others are red, the rest of the circle is the original white.

How can this be accomplished in css/js/html

Any help appreciated?

Have a look at [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). It's still very new, but it is supported in chrome, firefox, and opera — GammaGames, Oct 23 '19 at 22:46
more ideas: https://stackoverflow.com/q/54674595/8620333 / https://stackoverflow.com/q/55424824/8620333 / — Temani Afif, Oct 23 '19 at 23:20

score 4 · Accepted Answer · answered Oct 23 '19 at 22:51

Have a look at mix-blend-mode. It's still very new, but it is supported in chrome, firefox, and opera

let img = $("#cursor");

$(document).on('mousemove', function(e){
    img.css({
       left:  e.pageX,
       top:   e.pageY
    });
});

#cursor {
  position: absolute;
  mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200">

<img src="https://picsum.photos/32" id="cursor">

Change overlapping pixels in css

1 Answers1