Mouse XY to change image saturation

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!!

1 answer

  • answered 2017-06-17 19:17 CodeWizard

    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>