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;
}

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
    Respostas
    1. Fica lindo mesmo, e o legal é que ninguém usa xD

      Excluir
  2. Respostas
    1. Acho que dá sim, mas para ser sincera eu não sei como :3

      Excluir
  3. 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!