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
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?