Borda e Opacidade ao passar o mouse nas imagens

Oii meus coelinhos cor de esmeralda :3 (desculpem o titulo enorme)

Hoje eu vim postar o tutorial que eu prometi postar na terça. (hoje)

  Enfim, o tutorial  de hoje é assim, você passa o mouse sobre a imagem do seu blog (ela está normal) e então, ele fica com borda e opacidade, exemplo :

(Passe o mouse sobre a imagem para ver o resultado do efeito)

Gostou e quer aprender como faz? 

Clique em "Leia Mais" para ver o resto do tutorial :)

1- Clique em Modelo, e depois em editar HTML no seu blog.

2- Aperte Ctrl + F e procure por : ]]></b:skin>

Acima disso, cole o seguinte código :

.post img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border-radius: 0px 0px 0px 0px; -webkit-transition-duration: 1.90s;

}

.post a:hover img{ filter:alpha(opacity=100); -moz-opacity:0.60; opacity:0.60; cursor:crosshair; border-radius: 50px 50px 50px 50px; -webkit-transition-duration: 1.90s;

}

Não altere nada, visualize para ver se nada deu errado e salve!

Se for reblogar dê os créditos ao Monster High SL com o  link, além disso, esse é o primeiro codigo que eu criei sozinha (que orgulho)! Você não vai achar esse código em mais nenhum blog. Então não esqueça de dar os créditos SEMPRE!

Ah, e sexta (eu acho) tem mais tutorial, por que como esse blog não foi feito para postar tutoriais, temos que aproveitar quando tem :)

Kisses, Lais!