Image Map

07/04/2013

Efeito desfoque nas imagens

queria um desses "filtros" dos sonhos
 Bom dia gente! Hoje é domingo, dia de tutorial! E trouxe um bem fácil e legal pra ser usado nas imagens do seu blog (caso queira, é claro né). Ele faz com que a sua imagem se "desfoque" quando você passa o mouse sobre a imagem. Não sabe como é? Assim:
antes de passar o mouse - com o mouse em cima da imagem
 É bem fácil de se colocar no blog! Vamos lá? Vá no seu blog e em Modelo, então clique em Editar HTML e marque a caixinha de "Expandir modelos de widget". Então tecle Ctrl+F e procure por:
]]></b:skin>
 Então cole acima do código encontrado o seguinte código:

.dressbreaker {
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
transition: all .1s linear}
.dressbreaker:hover {
-webkit-filter: blur(1px);z-index: -99px;}

 Eu dei pro efeito o nome de "dressbreaker", era uma coisa do anime que eu estava assistindo na época que fiz ele (quando ainda estava fazendo esse layout, ashuashahsu). Então vá em Layout e clique em Adicionar Gadget> HTML/Javascript e adicione lá o seguinte código:
<a href="LINK"><img class="dressbreaker" src="URL DA IMAGEM" /></a>
 Use o código acima caso queira que a sua imagem leve para algum link (tipo a dos afiliados daqui do blog, no gadget de Gatinhos). Caso não queira com link, use o seguinte código:
<img class="dressbreaker" src="URL DA IMAGEM" />
  Aí é só trocar "URL DA IMAGEM" por, obviamente, a url da sua imagem. Também dá pra utilizar isso nas imagens dos posts, ok? Só colocar o código na parte de "HTML" (do lado de Escrever, bem na esquerda da barra do menu onde você edita o seu post).
 Prontinho, tutorial feito!
 Espero que tenham gostado, e que usem (viu dona Mille? o3o)! E não se esqueçam de me pedir posts via comentários ou asks!

39 comentários:

  1. Esse efeito é muito legal. Beijão <3

    @keithpappen
    www.detalhesamor.blogspot.com

    ResponderExcluir
  2. Adorei, o efeito fica muito fofo ♥ XX
    viverserfeliz-renata.blogspot.com

    ResponderExcluir
  3. Esse efeito é muito fofo, dá um ar de lindezaa hahahahah
    Retribui? http://caramelises.blogspot.com.br/ , 2bjs (:

    ResponderExcluir
  4. AEEEEEEEEEEEEEEE, estou me sentindo muito famosa, meu pedido foi atendido ~bitch pls.
    Amei o tutorial, obrigado mesmo, Paula *u*
    Beijos :3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  5. Adorie o tutorial. eu sempre ficava vendo o efeito tentado saber como era feito
    beijos

    ResponderExcluir
  6. Amo *3* imagem de Arya Costa Stark <3

    ResponderExcluir
  7. Deve ficar legal mesmo o efeito ^^

    relicariodasrafleur.blogspot.com.br

    ResponderExcluir
  8. é muito massa esse efeito *--* haha
    Beijos s2
    arazaodesorrir.blogspot.com

    ResponderExcluir
  9. Que legal o efeito, achei super interessante, talvez eu use no meu próximo layout ^-^
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  10. O resultado é muito fofo mesmo, a imagem fica linda! Beijos
    ilovecantores.blogspot.com

    ResponderExcluir
  11. Adorei o tuto, eu gosto muito desse efeito e sempre uso :D
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  12. adorei, e super fácil de fazer também né ?

    Uaau, parabéns pelo seu blog, eu amei aqui, amei sua criatividade, seu modo de falar com os leitores, a forma que você usa nas postagens, o design e etc, eu realmente curti e vou voltar aqui sempre ! Obrigada por ter criado . Parabéns novamente e já estou seguindo ((: Parabéns !!
    http://dezesseteetantos.blogspot.com.br/

    ResponderExcluir
  13. Nossa, que legal!!!
    vou tentar fazer...
    Beijos!!!
    http://nailmypassion.blogspot.com.br/

    ResponderExcluir
  14. Acho super lindo! Pena que eu to usando o fade, hehe. Adorei o tuto! :D
    Beijos,
    www.sonhosde-primavera.com
    pensa-mentosmeus.blogspot.com

    ResponderExcluir
  15. ARRASOU! Vou aplicar isto no meu blog de testes e ver como fica. ( :

    >>Bonequiinha de Luxo<<
    - xoxo -

    ResponderExcluir
  16. Paula, eu mudei o nome do meu blog, vc poderia divulgar o novo endereço?
    http://batomdeveludo.blogspot.com.br/
    Obrigada, beijos ♥.

    ResponderExcluir
  17. Eu vi esse efeito nas imagens de um blog uma vez, acho esse efeito super fofo e é bem simples o tutorial ^^

    bjo ;*
    1maginer | blogspot.com

    ResponderExcluir
  18. Espero que consiga Kamilly.♥

    ResponderExcluir