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?

Answer 1

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/

Answer 2

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/