Grayscale ao Contrário: Colorir imagens ao passar o cursor

Oie :3 Agora há pouco postei no Candylland como usar o efeito Grayscale que faz com que a imagem perca a cor quando você passa o mouse, ficando com uma tonalidade maior de cinza. E testando o código descobri que o efeito reverso também é legal, ou seja, a imagem poderá se apresentar com uma tonalidade cinza maior e quando se passar o mouse, ela fica colorida ^-^ Assim:

Aqui no blog uso um efeito de opacidade, mas acho que dá para perceber que ficou meio acinzentado não é? Para quem tem blog em tonalidade escura, usar em suas imagens pode ser legal, e até mesmo para destacar alguma imagem das demais. Super simples de fazer...
1. Acima de ]]></b:skin> cole isso:
.gray, a gray {
-webkit-filter:grayscale(50%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 0.5s;
-webkit-filter:grayscale(1%)
}

2. Se quiser que apareça em todas as suas imagens troque todas as palavras "gray" do código por "img".
Mas se quiser aplicar em imagens específicas use este código:
<div class="gray">
<img src="URL DA IMAGEM"/></div>

E pronto ^^ Espero que gostem e beijus

8 Comments

  1. Unknown15 fevereiro

    amiga como faço pra ter esses tipo de elite tipo o seu de coraçoeszinho com efeito,amei,me ajuda... =\\
    bjus

    ResponderExcluir
    Respostas
    1. Roberta16 fevereiro

      Eu o obtive no HTMLUV (link ali nos créditos). Chama-se efeito pulsar :3 Eu tinha visto no Miki Candy e também adorei <3
      Beijinhus...

      Excluir
    2. Unknown16 fevereiro

      obg flor,vc eh um amor
      bjs

      Excluir
  2. Sam Mag15 fevereiro

    Onw, não pude deixar de notar o novo cabeçalho, ficou maravilhoso! amei
    ótimo tutorial, já conhecia, até já postei ele no blog, mas não conhecia esse que dá pra colocar no lugar que quiser!

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Roberta16 fevereiro

      Pois é, achei interessante também ^^
      E muito obrigada!!!
      Beijus ;3

      Excluir
  3. Jennifer22 março

    adorei fofa bjssss

    ResponderExcluir
  4. Esthefani02 novembro

    Ahh muito obrigada estava buscando por esse código!

    ResponderExcluir
  5. Hime16 outubro

    Perfeito. Me ajudou muito!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up