How to smoothly light up an image?

Question

HTML

Task:
you need to make a smooth transition from gray to blue in the picture on the site when you hover over it
Picture in png format with a colorless background.

Answer 1

An example is needed to say for sure, there are actually a lot of options: -
you can put a color picture

transition:1s;
-webkit-filter: grayscale(100%);

and with hover
, you can make a block with a transparency of 50 on top of the picture, and change the color of the block on hover

Answer 2

If you need blue or some other, google towards filter: hue-rotate
and here is an example on htmlacademy https://htmlacademy.ru/courses/97/run/4

Answer 3

changing the color palettes of bitmaps on the web is currently only possible using the filter properties . But for now, only Webkit supports this approach. If you have declared cross-browser compatibility, then it is better to have two different images and with a hover delay, hide one and show the other.