Wie entsättige und sättige ich ein Bild mit CSS?

Aktualisieren

Ich habe gerade festgestellt, dass die Entsättigung nur in Chrome funktioniert. Wie kann ich es in FF, IE und anderen Browsern zum Laufen bringen? (Überschrift geändert)

Ich konvertiere ein Farbbild in Graustufen, indem ich die Vorschläge hier befolge: Konvertieren Sie ein Bild in HTML/CSS in Graustufen

Und es funktioniert super (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;
}

Aber ich bin nicht in der Lage, die Entsättigung zB bei Mouseover zu entfernen.

Irgendwelche Ideen, was ich falsch mache?

Sie müssen nur die Graustufen für jede Browser-Präfix-CSS-Eigenschaft umkehren:

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/

Da es um diese Frage geht SättigungDie saturate() Filter könnte besser passen. Dies ermöglicht auch übersättigte Farben (Werte über 100 %):

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

https://jsfiddle.net/t1jeh8aL/

Es ist cooler, wenn Sie einen Übergang wie diesen hinzufügen:

  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%);
  }