Tuto: Efeito nas imagens

Vocês já devem ter visto em alguns blog a imagens com borda colorida e quando passa o mouse a borda muda de cor,imagens arredondadas como no aqui no LD,com efeito opacidade,bordas variadas,e muitos outros estilos.Hoje vou ensinar a como fazer isso em todas as imagens da postagem.É bem simples e fácil.

Vá em design > editar HTML ,dê ctrl+f e procure por ]]></b:skin>.Logo acima dessa tag cole o código correspondente ao estilo que quer.

Com borda colorida e efeito hover

.main img {

border: 3px solid  #FF1493 ; /*cor e tamanho da borda*/
-webkit-transition-duration: .70s; */ Efeito fade */
}
.main img:hover {
border: 3px solid #FF69B4; /*cor e tamanho da borda hover*/
-webkit-transition-duration: .70s; */ Efeito fade */
}

Bordas arredondadas

.main img {

-moz-border-radius: 10px;

-webkit-border-radius: 10px 10px 10px 10px; */ Bordas arredondadas */

Borda e opacidade hover

.main img:hover {

opacity: 0.9;

-moz-border-radius: 03px;

-webkit-border-radius: 20px 20px 20px 20px; */ Bordas arredondadas hover */

}

Borda em dois cantos e sem borda hover

.main img {
-moz-border-radius: 02px;
-webkit-border-radius: 0px 20px 0px 20px; */ Bordas arredondadas */
-webkit-transition-duration: .70s; */ Efeito fade */
}
.main img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 0px 0px; */ Bordas arredondadas hover */
-webkit-transition-duration: .70s; */ Efeito fade */
}

Créditos: ~www~