Borda e opacidade nas imagens

Eu já ensinei aqui como colocar o efeito de opacidade nas imagens do blog, mas hoje vou passar um código que além de diminuir a opacidade, aplica uma borda em volta na imagem. Veja o exemplo:

Para colocar esse efeito, é só ir no HTML do seu blog, apertar Ctrl+F e procurar por ]]></b:skin>
Cole logo acima esse código:

.border {
-moz-opacity:0.70; opacity:0.70;
-webkit-transition-duration:2s;
background-color:#e7b3c2 /*Cor de fundo, aparece enquanto a imagem está carregando*/;
border:2px solid #c8debf; /* Cor e estilo da borda*/ }
.border:hover  {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-color:#e7b3c2; /*Cor de fundo quando passa o mouse em cima*/
border: 2px solid #f2ada5; /* Cor e estilo da borda quando passa o mouse em cima*/
}

Salve as alterações.
Para o código funcionar, você tem que por a tag class="border" no código da imagem, assim:
<img src="linkdaimagem" class="border"/>

Espero que tenham gostado, e se usar, comente e dê os créditos! Kissus