Opacidade e borda ao passar o mouse em uma imagem

Oii, hoje vamos aprender a fazer um efeito muuuito legal, é um pouco exagerado mas aí cada um personaliza como preferir, é bem simples de fazer. Créditos ao blog Annyz, acho que o nome é esse.

[Print feito pela dona do blog que fez o tutorial original]

Vá no html do seu blog e procure pela tag: ]]></b:skin>


ANTES da tag cole o código abaixo:

/*------ IMAGE ANIMATION------*/
img {
filter:alpha(opacity=100);
-webkit-transition-duration:.5s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .6;
-webkit-box-shadow: 0px 0px 20px #000000;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-border-top-right-radius:30;
-webkit-border-top-left-radius:30;
-webkit-border-bottom-right-radius:30;
-webkit-border-bottom-left-radius:30;
}
img:hover {
filter: alpha(opacity=60);
opacity: .60;
border: 1px solid #000000;
border-radius: 50px;
-moz-border-radius: 50px;
}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}

Lilás - É a cor da sombra que irá ficar por tras da borda
De vinho bem clarinho - É a cor da borda

É claro que eu fiz algumas adaptações ao tutorial, expliquei do meu jeito e etc... Afinal lá ta tudo em espanhol né, rsrs. Mas eu já testei e espero que tenham gostado e se usarem comentem!

Aviso: Gente, o blog vai fazer 400 seguidores e a meta é de 500 seguidores então por favor me ajudem a consiguir cumprir a minha meta. Falta pouquinho, quem puder me ajudar a divulgar agradeço...