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

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?