How do I desaturate and saturate an image using CSS?

Question

Update

I just realized that the desaturation is only working in Chrome. How do I make it work in FF, IE and other browsers? (Headline changed)

I'm converting a color picture to greyscale by following the suggestions here: Convert an image to grayscale in HTML/CSS

And it works great (in Chrome): http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

But I'm not able to remove the desaturation on e.g. mouse over.

Any ideas to what I'm doing wrong?

score 31 · Accepted Answer · answered Apr 10 '14 at 17:24

31

You just have to reverse the grayscale for each browser prefix CSS property:

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

answered Apr 10 '14 at 17:24

Alex W

33,401
9
92
97

Great, that worked. But do you see why desaturation doesn't work in FF and IE? – Steven Apr 10 '14 at 17:29
2

@Steven It looks like [Firefox doesn't support](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Gecko_notes) the full `filter` spec yet because it hasn't solidified enough. IE 9 deprecated `-ms-filter` and IE 10 doesn't support it. – Alex W Apr 11 '14 at 01:21
1

Well, the picture is disagreeable but the tip is pretty useful. Thanks! – Sergio Mar 12 '19 at 02:17

Sphinxxx · Answer 2 · 2020-04-24T21:47:22.410

9

Since this question is about saturation, the saturate() filter may be a better fit. This also allows for super-saturated colors (values above 100%):

img {
    filter: saturate(0%);
}
img:hover {
    filter: saturate(300%);
}

https://jsfiddle.net/t1jeh8aL/

edited Apr 24 '20 at 21:47

answered Apr 27 '18 at 00:48

Sphinxxx

10,302
3
43
73

You're jsfiddle is broken. – N-ate Apr 24 '20 at 15:36
1

@N-ate Thanks, fixed. – Sphinxxx Apr 24 '20 at 21:47

score 8 · Answer 3 · answered Jul 20 '16 at 08:42

Its cooler if you add a transition like this:

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }

How do I desaturate and saturate an image using CSS?

3 Answers3