Efeito Blurry em imagens hover no blog

Oi Cherryes! Esse é oficialmente meu primeiro tutorial (hêó/). Então decidi começar com um bem simples! Esse efeito deixa foto clara quando passa o mouse em cima ela fica normal. Eu amo muito esse feito, e é o que esta nessa foto de ilustração do post. (em cima ^). Quer saber mais sobre esse feito? Clique em "Mais Informações". 

Vamos lá ao tutorial? É bem simples.

Abra o painel do Blogger, e vá em Modelo. Lá clique em Editar HTML. Quando abrir aperte F3 e procure por:

Quando achar clique nos três pontinhos que irá aparecer os códigos que mais estamos acostumados. Esses códigos aparecerão completamente em azul, então desça até o fim dessa parte azul e procure por: ]]></b:skin> e cole o código a seguir em cima dele.

.border { 

-moz-opacity:0.70; opacity:0.70;

-webkit-transition-duration:2s;

border:3px solid #c7f500; /* Cor e estilo da borda*/ } 

.border:hover  { 

filter:alpha(opacity=100); 

-moz-opacity:1.0; 

opacity:1.0;

border: 3px solid #ff3e96; /* Cor e estilo da borda quando passa o mouse em cima*/ 

}

 Feito isso, você pode mudar a cor da borda e o estilo da borda quando passa o mouse em cima, pra melhor combinar com o design do seu blog! Mas você terá que colocar o código a seguir sempre que for querer colocar uma foto em seu blog com esse efeito:

<img src="URL-DA-IMAGEM" class="border" />

Qualquer dúvida só postarem ai nos comentários que eu respondo, tirando suas dúvidas. Comentem falando o que vocês acharam tanto do post quanto do efeito! Obrigada!

Beijos gelados, Duuh.