Greyscaling com restauração de cores ao passar o mouse usando CSS

É possível obter uma aparência em tons de cinza com restauração de cores ao passar o mouse por vários métodos , fornecendo compatibilidade entre navegadores no IE e no Firefox.

Método 1: CSS puro (usando uma única cor Imagem)

Esta técnica utiliza a propriedade filter com prefixos de fornecedor para escalar a imagem em tons de cinza em todos os navegadores suportados:

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 duas imagens)

Outra abordagem envolve o uso de duas imagens: uma versão em tons de cinza e uma versão colorida. A imagem em tons de cinza é exibida inicialmente e o estado de foco passa para a imagem colorida:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Método 3: SVG com filtros CSS

Para o IE10 e navegadores modernos, o SVG embutido pode ser usado para aplicar filtros, permitindo que o efeito de escala de cinza seja controlado dinamicamente:

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

svg image:hover {
  opacity: 0;
}