html5 - para - tooltip css jquery
¿Cómo desaturar y saturar una imagen usando CSS? (3)
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?
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%);
}
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%);
}
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;
}