How to animate change colour of an image on hover in a non-trivial manner-CodePudding

Context
I've taken a look for possible answers to this question, and have come across solutions utilising the css filter: invert(...) (example) in order to invert the colours of an image on hover. However the functionality this provides is particularly limited. For an example of what I'm trying to achieve there is an example on this site or this screen recording demonstration, which can be seen upon hovering over one of the thumbnails on the page. On hover, the given image transitions to an inverted and then black and white representation, though on a closer look it seems that only certain colours are inverted during this transition - notice how blue in the non-active state is not inverted to pink/orange when hovered over. It seems only colours in a given range undergo this inversion, such that the inversion provides only a blue/teal effect while transitioning.

Problem Clarification
From what I can tell there are a couple key complex pieces to this effect:

Animating a change in colour representation of an image multiple times (colour -> inverted -> b&w)
Selectively applying such an effect to a limited range of specific pixel values (certain colours)

Question
I appreciate this is a particularly specific piece of functionality, but I'm looking to gain a deeper understanding into this more complex style of image manipulation. It seems CSS is clearly too limited to be able to provide this functionality, which gives me an indication this is a heavily javascript reliant effect, and potentially requires use of a canvas element as the given example website uses, but I'm unsure how to find more information on how this works or the principles used. So the questions are as follows:

If possible, is someone able to provide a small code snippet which provides a small example of this given functionality
Failing this, can anyone supply ideas regarding the underlying logic of this functionality, libraries which supply a way to perform this manipulation or any other resources which can help me further understand and look into how to implement this effect.

Thanks in advance

CodePudding user response：

There is a library called Caman.js that could be used for creating Instagram type effects. It's no longer actively maintained - the github repo is here: CamanJS. It uses Canvas under the hood. I used it once about 7 years ago and the transformations used to take a very long time.

CodePudding user response：

You could draw the image on a canvas then plod through every point on it removing the red for example.

I wonder whether that is worth it - it can be quite processor intensive.

For just a quick removal of red hue you could apply a filter and have the filter animated on hover.

Here's a very simple example. Playing around with timings, rotations, sepia et al can yield more subtle results.

.thruBlue {
  width: 10vw;
  height: auto;
  display: inline-block;
}

.thruBlue:hover {
  animation: 1 recolor 0.7s linear;
  animation-fill-mode: forwards;
}

@keyframes recolor {
  0%,
  50% {
    filter: grayscale(0) hue-rotate(215deg);
  }
  100% {
    filter: hue-rotate(215deg) grayscale(100%);
  }
}

<img src="https://i.stack.imgur.com/NbloO.png" >