"Preto e Branco" e "Sépia" em imagens hover

29 de abr. de 2013

Tumblr_mjkkh5echt1rqo2u8o1_500_large

Quem não gosta de efeitos hover que atire a primeira pedra! Hoje vamos fazer um efeito no qual, ao passar o mouse sobre determinadas imagens, elas automaticamente passem para o "preto e branco" ou "sépia".  
Acreditem, isso dá um up nas fotografias, podendo ver ela de duas formas distintas: com cor e monocromática. Confira!

Preto e Branco
Large
Passe o mouse e veja o efeito!

Abra seu HTML e cole o seguinte código acima de ]]></b:skin>

.pb {
-webkit-transition-duration: .90s;
}
.pb:hover {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(100%);
}

E quando quiser usar o efeito, cole o seguinte código na guia "HTML" da postagem ou em um gadget de "HTML/JavaScript"

<img src="link da imagem" class="pb">


Sépia
Passe o mouse e veja o efeito!

Abra seu HTML e cole o seguinte código  acima de ]]></b:skin>

.sépia {
-webkit-transition-duration: .90s;
}
.sépia:hover {
-webkit-transition-duration: .90s;
-webkit-filter: sepia(100%);

E quando quiser usar o efeito, cole o seguinte código na guia "HTML" da postagem ou em um gadget de "HTML/JavaScript"

<img src="link da imagem" class="sépia">

Simples, porém útil e bonito. Curtiram?

45 comentários:

  1. Super interessante, adorei o tutorial!!
    super beijo

    Mania de Bruna
    @ManiaDeBruna

    ResponderExcluir
  2. Efeitos lindos. Dão um upp na foto. Amei.
    www.garotaousada.com

    ResponderExcluir
  3. adorei!!!
    super lindoss!!

    >>amoraazeda.blogspot,com<<

    ResponderExcluir
  4. Ótmo tutoriais! São muitos útil! Adorei os efeitos! Um bom layout sempre precisam de algum efeito na imagem né?
    -------------------------------------------

    Kisses ;*
    ~~~> The Things Girls // Visita?

    ResponderExcluir
  5. Gostei muito da dica com certeza vou usar
    beijos
    http://maisumaprimaveras.blogspot.com.br/

    ResponderExcluir
  6. Que legal. Eu sabia um que era em todas. Mas esse é legal, da pra por os afiliados ou postadores :D
    the-paradiise.blogspot.com.br

    ResponderExcluir
  7. Vou enviar o recado por aqui, eu sei que vc ja leu meu comentário anterior em http://goimagines.blogspot.com.br/2012/09/protegendo-seu-blog-contra-copias.html,só não aprovou-o, sobre o e-mail que lhe enviei solicitando a remoção da matéria, gostaria que o fizesse logo, por favor. Aguardo resposta.

    ResponderExcluir
  8. Muito lindo seu layout, adorei o post! Beijos
    the-imperfect-girls.blogspot.com.br

    ResponderExcluir
  9. Aqui não pegou "/
    … mimimi …


    Con amore, Donna Yellow ♥

    maybe yellow /Loja

    ResponderExcluir
  10. Olá gostaria de convidar a blogueira e suas leitoras a visitar meu cantinho,Preciso de sua ajuda para seguir o meu blog,para que possamos chegar a 200 seguidores,venho batalhando por isso a bastante tempo,e conto com sua ajuda para isso, visite meu blog !! se seguir sigo de volta, Basta comentar avisando ai sigo seu cantinho,um Beijo enorme e até logo *-*
    garotassabem1.blogspot.com

    ResponderExcluir
  11. Oi, quero te dar os parabéns pelo blog. Conteúdo de alta qualidade. Venho procurando há muito tempo material para fazer edições no template do meu blog e é a primeira vez que encontro algos com essa qualidade. Belo trabalho, continue com ele.

    um abraço! Nathália.

    ResponderExcluir
  12. Acho muito lindo kk, amei os efeitos!!
    Uhuul, você voltou o/
    Estava com saudades já!
    Beijão, Anny
    Batom de Framboesa

    ResponderExcluir
  13. AAAAAAH não consegui

    http://coisas-de-bonecas.blogspot.com.br/

    ResponderExcluir
  14. Oii anny te sigo lá no instagram, e aqui no blog. Quero dizer que mudei o layout do meu blog, e o nome tbm. Dá uma conferida lá, se gostar do meu segue tbm?

    http://meupensamento0.blogspot.com.br/

    Seu blog é Divo ♥
    Beijão Fofa;
    Izabel.

    ResponderExcluir
  15. Bem legal.
    Beijo, Lili
    Princesa Teen / Layout novo.
    Eu no youtube / Maquiagem, dicas, DIY... Se inscreve e divulga!

    ResponderExcluir
  16. Fica super lindo >.< Você tem certeza, dá um up nas fotografias !

    Nhackt Yoo

    Crazycherry-sa.blogspot.com

    ResponderExcluir
  17. Oi Anny!, você foi convidada para participar do projeto ''My love clicks'', é um projeto fotográfico para blogueiras, se você quiser participar é só clicar no link abaixo e reponder, ficarei muito feliz se você puder, Obrigada!

    http://the-charming-place.blogspot.com.br/2013/05/novo-projeto-fotografico-my-love-clicks.html

    ResponderExcluir
  18. os efeitos são lindos! Vou usar quando for fazer um post com imagens!
    Adorei

    http://garotamarte.blogspot.com.br/

    ResponderExcluir
  19. Oiie Tb ?
    Eu Não Achei O ]]> Mesmo Colocando Ctrl + F Tem Outro Jeito ?
    Bjs Obg

    ResponderExcluir
  20. Amei, eu já conhecia o tutorial

    meu blog

    http://coisas-de-bonecas.blogspot.com.br/

    ResponderExcluir
  21. Gostei do tuto ja q eu q criei primeiro :(

    ResponderExcluir
  22. como poe esses trassinhos em baixo do titulo da postagem ?

    ResponderExcluir
  23. Super legal, sempre quis saber como fazia (:

    nossoblogsecreto.blogspot.com.br

    ResponderExcluir
  24. Oi Anny, adorei o tutorial, estava louca atrás desse efeito! Faz um tempo que acompanho seu blog, e você está realmente de parabéns! Peço que, quando tiver um tempinho, visite meu blog, e dá uma comentada dizendo se gostou ou não! Bjoos!

    - Guerreira Adolescente
    guerreiraadolescente.blogspot.com

    ResponderExcluir
  25. Ótimo tutorial, adorei saber como faz deixar preto e branco chuchu. (:

    blogchuvasdenovembro.blogspot.com

    ResponderExcluir
  26. Oi, eu achei seus tutoriais muito legais, mas ainda estou com algumas dúvidas, eu gostaria de saber como você fez sua barra lateral, principalmente essa parte do 'Sobre', que eu achei incrível, com a imagem, o texto e os links de redes sociais. Muito obrigado.

    ResponderExcluir
  27. Caramba gatona, que post incrível! Esse efeito é mágico! Adorei!
    Parabéns pelo portal, está ótimo!

    Mil beijos! Foco sempre!

    ResponderExcluir
  28. Muuito show,
    Ameei flor :D
    Beijão !

    www.belezaabsolluta.blogspot.com.br

    ResponderExcluir
  29. Gostei muito, os outros blogs não ensinam tão bem explicado assim :)
    >> http://it-styles.blogspot.com.br

    ResponderExcluir
  30. Adorei os efeitos!

    Me diz uma coisa, qual a fonte você usa no título dos posts?
    Muito linda essa fonte :)

    www.imprevisivel.com

    ResponderExcluir
  31. oii flor pode me tira uma duvida que ta me matando a dias, vc sabe como tirar aquela margem branca que fika nas fotos dos post ,olha como ta http://selinhosecaramelos.blogspot.com.br/
    alguma dika pra me ajuda pff??

    ResponderExcluir
  32. Quando eu faço isso a imagem fica na lateral do blog e n na postagem! pode me ajudar?

    ResponderExcluir
  33. creditando ! ;) bom tutorial

    ResponderExcluir
  34. Muito legal, mais dá um pouquinho de trabalho, tipo,colocar e tals, kkk. (Sou preguiçosa) u.u.

    http://ironiadeumaadolescente.blogspot.com.br/

    ResponderExcluir
  35. Fui tentar fazer, procurei o " ]]> " e não encontrei no meu Html (Sim! eu pesquisei pelo Ctrl F)

    ResponderExcluir
  36. Como vc faz para qd os leitores colocarem o mouse e mudar de cor??Beijoos!

    ResponderExcluir
  37. Obrigada me ajudou muito! Amei os Efeitos :)

    ResponderExcluir
  38. Não tem esse código aqui :c

    ResponderExcluir
  39. obrigado linda <3 vc me ajudou bastante

    ResponderExcluir
  40. Vllw, seu blog me ajudou muito, vi vários tutoriais aqui e embelezei o meu blog :3 Vllw msm...

    ResponderExcluir
  41. Alana linda! Faz um link-me para o seu blog pra mim linkar ele no blog que estou fazendo!

    ResponderExcluir
  42. Amei o efeito. Vou usar o preto e branco :3
    mythings2.blogspot.com

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.