title: How to animate change colour of an image on hover in a non-trivial manner
body: <p><strong>Context</strong><br />
  I've taken a look for possible answers to this question, and have come across solutions utilising the css <code>filter: invert(...)</code> (<a href="https://stackoverflow.com/questions/13325798/invert-colors-of-an-image-in-css-or-javascript">example</a>) 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 <a href="https://paulethenriette.com/" rel="nofollow noreferrer">this site</a> or this <a href="https://webm.red/r2A9.webm" rel="nofollow noreferrer">screen recording demonstration</a>, 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.</p>
  <p><strong>Problem Clarification</strong><br />
  From what I can tell there are a couple key complex pieces to this effect:</p>
  <ul>
  <li>Animating a change in colour representation of an image multiple times (colour -&gt; inverted -&gt; b&amp;w)</li>
  <li>Selectively applying such an effect to a limited range of specific pixel values (certain colours)</li>
  </ul>
  <p><strong>Question</strong><br />
  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:</p>
  <ul>
  <li>If possible, is someone able to provide a small code snippet which provides a small example of this given functionality</li>
  <li>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.</li>
  </ul>
  <p>Thanks in advance</p>