¿Imagen en escala de grises con CSS y cambiar el color al pasar el mouse?

86

Estoy buscando tomar un ícono de color (y será un enlace) y convertirlo en escala de grises hasta que el usuario coloque el mouse sobre el ícono (donde luego colorearía la imagen).

¿Es posible hacer esto y de alguna manera que sea compatible con IE y Firefox?

css  mouseover  grayscale 
— Meta
fuente
2
— Tom Sarduy
¿No sería un efecto más interesante si lo hicieras al revés? dejar que el cursor del mouse sea como una varita mágica que le da color a un mundo oscuro
— X10D

Respuestas:

242

Existen numerosos métodos para lograr esto, que detallaré con algunos ejemplos a continuación.

CSS puro (usando solo una imagen en color)

img.grayscale {
  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"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Mostrar fragmento de código

Puede encontrar un artículo relacionado con esta técnica aquí .

CSS puro (usando una escala de grises e imágenes en color)

Este enfoque requiere dos copias de una imagen: una en escala de grises y la otra a todo color. Usando el :hoverpsuedoselector CSS , puede actualizar el fondo de su elemento para alternar entre los dos:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Mostrar fragmento de código

Esto también se puede lograr mediante el uso de un efecto de desplazamiento basado en Javascript, como la hover()función de jQuery, de la misma manera.

Considere una biblioteca de terceros

La biblioteca desaturada es una biblioteca común que le permite cambiar fácilmente entre una versión en escala de grises y una versión a todo color de un elemento o imagen determinados.

— Rion Williams
fuente
Si dichas imágenes deben estar vinculadas a otro sitio web, ¿cómo podría hacerse si las imágenes se establecen como fondos?
— Meta
1
Funcionaría de la misma manera, consulte la demostración en la sección 1. Si tiene alguna otra pregunta, estaré encantado de ayudarle.
— Rion Williams
1
chicos, ¿alguien notó que esto no funciona en safari? Acabo de verificar y encontré este problema, ¿hay alguna forma de resolverlo?
— Gajen
13

Respondido aquí: Convertir una imagen a escala de grises en HTML / CSS

Ni siquiera necesita usar dos imágenes que suenan como una molestia o una biblioteca de manipulación de imágenes, puede hacerlo con compatibilidad con varios navegadores (versiones actuales) y solo usar CSS. Este es un enfoque de mejora progresiva que simplemente recurre a las versiones en color de los navegadores más antiguos:

img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}

y el archivo filter.svg como este:

<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>
— Uriah Blatherwick
fuente
6

Utilizo el siguiente código en http://www.diagnomics.com/

Transición suave de blanco y negro a color con efecto de aumento (escala)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }
— Stefan Gruenwald
fuente
¡Funciona muy bien en navegadores webkit! Su código no me funciona en el navegador Firefox pero, de nuevo, creo que tiene algo que ver con un archivo SVG y estoy usando un mapa de bits en este violín jsfiddle.net/coolwebs/num04rya/10 Sin embargo, algo extraño: la transición El efecto en Safari hace que la imagen se mueva al
— pasar el mouse por encima
0

Puede utilizar un sprite de que tiene tanto versión del color y el blanco y negro-almacenado en él.

— Feeela
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.