Escala de grises con restauración de color al pasar el mouse por encima usando CSS

Es posible lograr una apariencia en escala de grises con restauración de color al pasar el mouse por encima a través de varios métodos , proporcionando compatibilidad entre navegadores tanto en IE como en Firefox.

Método 1: CSS puro (usando un solo color Imagen)

Esta técnica utiliza la propiedad de filtro con prefijos de proveedor para escalar la imagen en escala de grises en todos los navegadores compatibles:

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

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

Método 2: CSS puro (usando dos imágenes)

Otro enfoque implica el uso de dos imágenes: una versión en escala de grises y una versión en color. Inicialmente se muestra la imagen en escala de grises y el estado de desplazamiento pasa a la imagen en color:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Método 3: SVG con filtros CSS

Para IE10 y navegadores modernos, se puede utilizar SVG en línea se utiliza para aplicar filtros, lo que permite controlar dinámicamente el efecto de escala de grises:

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}