how to make smooth grayscale on hover using CSS

Question

I have logo in my website, it is grayscaled on hover i want it to be colored smoothly. it is working 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 do it this way:

 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 every 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 extra

Answer 2

Animating a filter takes a lot of computation and might hurt performance in some browsers.

You can get better performance by animating the opacity of a grayscale image to reveal a full-color image beneath it.

Here's an example.