Colocando borda com efeito hover nas imagens

Vejo muitas pessoas perguntando como colocar borda em imagens, então trouxe esse tutô super bacana!

Vamos lá é super simples!

Vá em Modelo >> HTML >> CTRL+F e procure pela tag ]]></b:skin> e cole acima dela o seguinte código:

.imagempost {

transition-duration: 1s;

-moz-transition-duration: 1s;

-webkit-transition-duration: 1s;

opacity: none; /*opacidade quando hover*/

border: 2px solid #b057df; /*espessura, tipo e cor de borda*/

}

.imagempost:hover {

transition-duration: 1s;

-moz-transition-duration: 1s;

-webkit-transition-duration: 1s;

opacity: .6; /*opacidade*/

border: 3px solid #ff6eb4#d08499; /*espessura, tipo e cor da borda quando hover*/

}

 depois vá na sua postagem clique no HTML dela e cole esse código

<img src="URL da imagem" class="imagempost"/></a>

 é isso espero que gostem!