In Tutoriais

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

Related Articles

8 comentários:

  1. 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. 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. 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. Pois é, achei interessante também ^^
      E muito obrigada!!!
      Beijus ;3

      Excluir
  3. Ahh muito obrigada estava buscando por esse código!

    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 - Google+ - Deviantart