Tutorial - Efeito Blur

Yoo britânicas! Boa noite!

Antes que queiram me matar, como sempre, desculpem não postar ontem, eu tava tão animada nesses dias, com meus maridos anunciarem ao mundo todo, praticamente querendo matar todas as directioners de curiosidade só para falarem que vem para o Brasil em 2014, que eu nem tive ideias para fazer uma nova postagem no blog.

Mas, vou calar a boca, antes que me mandem isso. Enfim, a postagem de hoje é um tutorial, efeito para colocar nas imagens do blog, ou usar como elite de afiliados, o que quiser. Como o nome do efeito diz, a imagem quando se passa o mouse por cima, fica "embaçado". Eu vi esse tutorial no Birthday Cake, então, créditos à eles pelo tutorial.

Preview do efeito aqui.

No HTML do seu blog, procure por ]]></b:skin>. Depois que achar, cole o seguinte código ACIMA da tag que procurou:

.border1 {background:#fff; padding:1px; border:5px solid #d5c9e8; margin:1px;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;}
.border1:hover {filter: blur(2px);
-webkit-filter: blur(2px); -moz-filter: blur(2px);
-o-filter: blur(2px); -ms-filter: blur(2px);
border:5px solid #d5c9e8;}

Troque os códigos sublinhados pelas cores que deseja na bordinha da sua imagem.

Depois disso, é só colocar o código abaixo onde você quer que o efeito apareça.

<img src="LINK DA IMAGE" width="Largura da Imagem" align="left" class="border1">

Fácil esse tutorial, né? Espero que consigam entender o tutorial, sou meio ruim para explicar. °3°

Beijos e até a próxima postagem! ♥

PS: Odeio algumas pessoas da minha rua. Tem barulho de kombi, que eu não suporto, garotos que não tem mais o que fazer e ficam na rua enchendo o saco dos outros e gritando, e eu querendo quase xingar. Mas, quem mandou morar perto de 2 igrejas.