1 de out. de 2012

Efeito desfoque nas imagens


Oi pessoal!
Hoje vou ensinar a aplicar o efeito de desfoque nas imagens quando passa o mouse. É ótimo para elite de afiliados e para dar uma variada ;)
Veja um preview aqui.
1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/b:skin

Acima disso, cole:

.Desfoquetty {width:55px; padding:4px; -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}.Desfoquetty:hover { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;-webkit-filter: blur(2px); color:#fff;}

Para aplicar o efeito, use o seguinte código:

<a href="LINK DO BLOG" title=' TITULO AO PASSAR O MOUSE ' onmouseover="ddrivetip('havingthemes')" ;="" onmouseout="hideddrivetip()"><img src=" URL DA IMAGEM  " class="Desfoquetty" /></a>

Veja um exemplo. (Gadget "desfoque" na barra lateral).

Para aplicar em todas as imagens do blog:


.post img {
width:55px;
padding:4px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.post img:hover {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(2px); color:#fff;
}
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

6 comentários:

  1. Eu testei aqui no meu blog de teste, ficou tãoo lindo *--*
    No próximo layout usarei com certeza (já que esse eu não posso modificar, regras da aposta).
    Gostei d++.

    ResponderExcluir
  2. Marina,onde que eu coloco o código de "efeito no blog inteiro" ?Não tá falando!E se falou,nao entendi!

    ResponderExcluir
    Respostas
    1. Esse código é para colocar em todas as imagens do blog ok?
      Você coloca ele acima de /b:skin também :D

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!