Tutorial : Efeito P&B ao passar o mouse na imagem (post/gadget)

 

Olá jujubinhas! Como estão ? Eu espero que estejam bem , e ultra-mega-super-felizes , assim como eu *-*

- Por que o motivo de tanta felicidade ? Ah , é porque eu percebi que o blog tem fãs *o* , o Creative Things será um dos nossos ? Eu espero que sim , pois eu amo esse blog mais que tudo ♥ E eu super recomendo ele á vocês. Agora , em relação o tutorial : o efeito é igual o daqui do blog , os últimos post's eu coloquei esse efeito , vocês repararam ?

Aaah ! Eu aqui meio que copiando a ideia do blog O mundo de Lo ♥ , eu criei uma enquete pra vocês escolherem como devo chamar vocês , (coisinha fútil ,mas belezinha) , aqui >.<

Bom , esse é o tutorial que eu postarei hoje :) Cliquem em "mais informações"

Os créditos desse tutorial vai para o blog : Go Imagine ! O tutorial é desse blog , então '-'

 

passe o mouse na imagem para ver o efeito P&B

Bom , a imagem que eu coloquei acima contém o efeito que eu ensinarei hoje pra vocês , pra começar , vá na aba "Modelo" , e daí vá no Quadro HTML . Dê Ctrl + F , ou F3 dentro do Quadro HTML e procure pela tag : ]]></b:skin> , quando acha-la , cole esse código acima dela :

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

Salve .
Esse efeito funcionja do gadget e no post . Vou ensinar ambos!
Para aplicar o efeito no post :

Crie uma postagem , e cole esse código no HTML da própria postagem :

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

Daí , no "link da imagem" , apague o cole o URL da imagem que vc for usar (dããã '-')
Para usar no gadget é o mesmo esquema , o que diferencia é que vc irá colar o mesmo código no gadget HTML/Java Script .

Espero que tenham gostado >.<
Kisses ♥ Vitória