Bem Vindo ^.^ | Efeito na equipe (ou na elite) do blog

Jisuis, que cute ^.^
Achado no maravilhoso mundo de http://weheartit.com/entry/39675465/via/BellaSouzaCallMeMaybe

Oi pessoas lindas!
Bem vindos ao meu novo blog. Espero que gostem e que ajude vocês.

Sei que estão ansiosos para ver o tutorial, então vamos lá!


O efeito é assim: ao passar o mouse na imagem, ficará desfocado. Para ver o efeito, clique aqui (ele demora um pouquinho, pois precisa esperar a página carregar)

.blur {
width:50px;
padding:0px;
border-radius: 20px;
-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: saturate(100%) ;
}
.blur:hover {
padding:3px;
-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: saturate(0%) ;
-webkit-filter: blur(2px); color:#fff;
}

Agora, é só visualizar e se estiver tudo bem, salve.
No layout, adicione um gadget, HTML/JavaScript e cole:

<a href="Link do blog" title="Título do blog" onmouseover="ddrivetip('havingthemes')" onmouseout="hideddrivetip()"><img src="Link da Imagem" width="Largura da Imagempx" height="Altura da imagempx" class="blur" /></a>

Lembrando que para colocara a largura e a altura com se pede, não pode apara o px, se não vai dar errado.

....................

Espero que tenham gostado ^.^
Beijitchos e até a próxima ;♥