Imagens com efeito de borda

Affs sabe quando você ta com aquele soninho e vontade de dormi...mas tem trabalho fazer então você foge para o blog...é tó assim hoje. Mas trago um tutorial de como deixar suas imagens com um efeito bem legal delas se mecherem ao passar o mouse sobre ela mudando os seus lados.

.
Como tó com sono sei que vocês não devem tá intendendo nada né...bom tá aqui a imagem para vocês terem uma ideia, ao tocar ela se meche mudando os lados.

1. Agora vamos lá! Em seu HTML procure pelo ]]></b:skin>, acima dessa tag você ira apenas colar esse código.

Códigos

.post img
{ 
filter:alpha(opacity=80);
 -moz-opacity:0.76; 
opacity:0.85;
- border-radius: 35px 0px 35px 0px;
-moz-border-radius: 35px 0px 35px 0px;
-webkit-border-radius: 35px 0px 35px 0px;
-transition-duration: 0.50;
-webkit-transition-duration: 0.50s;
-moz-transition-duration: 0.50s;
 } 
 .post a:hover img{
 filter:alpha(opacity=100);
 -moz-opacity:1.0; opacity:1.0;
-border-radius: 0px 35px 0px 35px;
-moz-border-radius: 0px 35px  0px 35px;
-webkit-border-radius: 0px 35px 0px 35px;
-transition-duration: 0.50s;
-webkit-transition-duration: 0.50s;
-moz-transition-duration: 0.50s;  }

Visualize e veja se tá direitinho, salve e pronto! Então gostou??? Não esqueça de comentar bom...eu vou voltar a dormi  kkkk trabalho que espere ate a próxima post pessoal.