Imagem em tons de cinza com CSS e recolorir ao passar o mouse?


86

Estou tentando pegar um ícone que é colorido (e será um link) e transformá-lo em tons de cinza até que o usuário coloque o mouse sobre o ícone (onde ele então coloriria a imagem).

É possível fazer isso de uma forma que seja compatível com o IE e o Firefox?



não seria um efeito mais interessante se você fizesse o contrário? deixe o cursor do mouse ser como uma varinha mágica que traz cor a um mundo escuro?
X10D

Respostas:


242

Existem vários métodos para fazer isso, que detalharei com alguns exemplos abaixo.

CSS puro (usando apenas uma imagem colorida)

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

Você pode encontrar um artigo relacionado a esta técnica aqui .

CSS puro (usando uma escala de cinza e imagens coloridas)

Essa abordagem requer duas cópias de uma imagem: uma em escala de cinza e outra colorida. Usando o :hoverpsuedoselector CSS , você pode atualizar o plano de fundo do seu elemento para alternar entre os dois:

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

Isso também pode ser feito usando um efeito de foco baseado em Javascript, como a hover()função jQuery, da mesma maneira.

Considere uma biblioteca de terceiros

A biblioteca desaturate é uma biblioteca comum que permite alternar facilmente entre uma versão em tons de cinza e uma versão colorida de um determinado elemento ou imagem.


Se essas imagens precisarem ser vinculadas a outro site, como isso poderá ser feito se as imagens forem definidas como planos de fundo?
Meta

1
Funcionaria da mesma maneira, verifique a demonstração na seção 1. Se você tiver outras perguntas, terei todo o gosto em ajudar.
Rion Williams,

1
pessoal, alguém percebeu que isso não está funcionando no safari? Acabei de verificar e encontrei esse problema, existe alguma maneira de resolvê-lo?
Gajen

13

Respondido aqui: converter uma imagem em tons de cinza em HTML / CSS

Você nem precisa usar duas imagens que soam como uma chatice ou uma biblioteca de manipulação de imagens, você pode fazer isso com suporte para vários navegadores (versões atuais) e apenas usar CSS. Esta é uma abordagem de aprimoramento progressivo que apenas retorna às versões coloridas em navegadores mais antigos:

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

e o arquivo filters.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>

6

Eu uso o seguinte código em http://www.diagnomics.com/

Transição suave de p / b para cores com efeito de ampliação (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);
    }

Funciona muito bem em navegadores webkit! Seu código não funciona para mim no navegador Firefox, mas, novamente, acho que tem algo a ver com um arquivo SVG e estou usando um bitmap neste violino jsfiddle.net/coolwebs/num04rya/10 Algo estranho - a transição efeito no Safari faz a imagem 'sacudir' no rollover ....
Ryan Coolwebs

0

Você pode usar um sprite que tenha ambas as versões - colorida e monocromática - armazenadas nele.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.