Olá! Eu gostava de ter postado mais cedo, mas não consegui. Tenho muitos trabalhos para fazer, esta semana tenho 3 testes, e para a próxima 5 (ou seja, todos os dias). Se eu não postar com muita frequência, desculpem-me!
O tutorial de hoje é o efeito de imagem desfocada ao passar o mouse. Vamos aprender!
1- Para deixar a imagem normal e no hover ficar desfocada, é só colocares o código abaixo acima de ]]></b:skin>.
.desfoque {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
filter: blur(1px);
-webkit-transition-duration: .9s;
}
.desfoque:hover {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
filter: blur(0px);
-webkit-transition-duration: .9s;
}
Para a imagem ficar desfocada e no hover ficar normal, é só trocar os (1px) por (0px) e os (0px) por (1px).
2- Depois é só salvar e usar o código abaixo num gadget, post...
<img src="Url da Imagem" class="desfoque">
Também é possível usar este efeito em todas as imagens do blog, se quiserem saber como eu digo!
Espero que tenham gostado.
Adoro demais esse efeito >3< até salvei o seu tutorial aqui.
ResponderEliminar~Abraços do Panda >>http://panda-blogueiro.blogspot.com.br/
É sempre bom estar mudando alguma coisa no blog. Pretendo fazer um novo layout ou pedir para que alguém faça um para mim, gostei da ideia de imagem de desfoco de imagem, fica legal :)
ResponderEliminarIsadora
Blog: My Moment Of Girl
https://www.facebook.com/pages/S%C3%B3-Animes/212673658921293
ResponderEliminar