Mouse XY to change image saturation

Question

Is it possible to change the saturation of an image from 0% to 100% based on x, y, co-ordinates of the mouse cursor?

So with the cursor in the top right corner of a webpage, the image in the top right would be fully saturated, and the image in the bottom left would be at 0% saturation.

With any images in between colored to the % based on coords of mouse.
Can't quite find any solutions online.

I'm looking for this code as an upgrade to the simple CSS hover to colour that i use currently.

Many thanks!!

Maybe this can help you > https://stackoverflow.com/questions/10521978/html5-canvas-image-contrast — Yuri Pereira, Jun 17 '17 at 19:20

score 0 · Answer 1 · answered Jun 17 '17 at 19:41

Write a JS function which track the mouse coordinate on screen and than translate it to the desired percentage.

Something like:

<img src="https://cdn.pixabay.com/photo/2017/05/14/14/24/grass-2312139_960_720.jpg" 
     width="300px">

<script>
  var x, y, img = $('img');

  $(document).mousemove( function( getCurrentPos ){
    x = getCurrentPos.clientX/window.innerWidth;
    y = getCurrentPos.clientY/window.innerHeight;
    $(img).css('filter', 'saturate(' + x*y*100 + ')');
  });
</script>

Mouse XY to change image saturation

1 Answers1