html5 - para - tooltip css jquery

¿Cómo desaturar y saturar una imagen usando CSS?

Question

Actualizar

Acabo de darme cuenta de que la desaturación solo funciona en Chrome. ¿Cómo lo hago funcionar en FF, IE y otros navegadores? (Titular cambiado)

Estoy convirtiendo una imagen en color a escala de grises siguiendo las sugerencias aquí: Convertir una imagen a escala de grises en HTML / CSS

Y funciona muy bien (en 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;
}

Pero no puedo eliminar la desaturación en, por ejemplo, el mouse sobre.

¿Alguna idea de lo que estoy haciendo mal?

Answer 1

Como esta pregunta es sobre la saturación , el filtro saturate() puede ser un mejor ajuste. Esto también permite colores supersaturados (valores superiores al 100%):

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

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

Answer 2

Es mejor si agregas una transición como esta:

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

Answer 3

Solo tiene que invertir la escala de grises para cada prefijo CSS de la propiedad CSS:

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/