How to make smooth hues of gray when hovering with CSS

Question

I have a logo on my website, it is gray on hover, I want it to be painted smoothly. It works, but not smoothly. I am using CSS transition.

This is my code.

<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" /> <style> img.tt-logo { filter: grayscale(1); transition: grayscale 0.5s; } img.tt-logo:hover { filter: grayscale(0); } </style> 

Answer 1

Try this as follows:

  img.tt-logo { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.5s ease; } img.tt-logo:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); } 

and each image has its own alt , you can use it without using img.class :

  img[alt="TT ltd logo"] { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.5s ease; } img[alt="TT ltd logo"]:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); } 

in this case class is optional

Answer 2

Filter animations are computationally intensive and can affect performance in some browsers.

You can get better performance by animating the opacity grayscale image to show the full color image below it.

Here is an example.