16/03/14

MT: Imagem desfocada ao passar o mouse


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.

3 comentários:

  1. Adoro demais esse efeito >3< até salvei o seu tutorial aqui.
    ~Abraços do Panda >>http://panda-blogueiro.blogspot.com.br/

    ResponderEliminar
  2. É 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 :)

    Isadora
    Blog: My Moment Of Girl

    ResponderEliminar
  3. https://www.facebook.com/pages/S%C3%B3-Animes/212673658921293


    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias