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>

score 32 · Accepted Answer · answered Jan 17 '16 at 15:59

32

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

answered Jan 17 '16 at 15:59

Igor Ivancha

3,413
4
30
39

thank you :) it works but i am still confused that why all works but not grayscale ?? – Maria Jan 17 '16 at 17:11
You need to animate the property. the property in this case is filter (or -webkit-filter). Not graycase, that is the value of the property – vals Jan 17 '16 at 19:49
@vals Thank you very much I got it :) – Maria Jan 18 '16 at 16:48
`-moz-filter` does not exist. You can safely remove it as Firefox uses `-filter`: https://developer.mozilla.org/en-US/docs/Web/CSS/filter – Hannes Schneidermayer Nov 17 '19 at 00:07

Rafi · Answer 2 · 2016-01-17T18:56:37.363

10

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.

edited Jan 17 '16 at 18:56

answered Jan 17 '16 at 16:49

Rafi

816
9
21

i did not get you can you please show some example ? – Maria Jan 17 '16 at 17:10

score 4 · Answer 3 · answered Sep 09 '21 at 16:01

With the current state of browsers, you could go for the example below, short and simple. Modern browsers nowadays support the grayscale CSS attribute and if you're only transitioning one attribute, best reference one attribute instead of all attributes.

img {
    grayscale: 1;
    transition: filter .23s ease-in-out;
}

img:hover {
    grayscale: 0;
}

Sources:

how to make smooth grayscale on hover using CSS

3 Answers3