Tutorial: Borda colorida em hover na imagem

Oii Gente,hoje iremos fazer a estréia da nossa Tag "Tutoriais"(uhu ^.^),o tutorial de hoje é  bem básico,como deixar a borda das Imagens do seu blog colorida em efeito hover,que é aquele efeito que quando passamos e mouse é uma cor e quando retiramos o mouse da imagem a borda fica de outra cor.Você não irá precisar de photoshop ou de outro editor de imagem é somente código.

Caso não saiba como é o efeito é só passar o mouse por cima da imagem acima.

1: Vá em editar Html e procure por ]]></b:skin> Acima dessa Tag cole:

.main img {

border: 3px solid  #f17c9d;

-webkit-transition-duration: .50s;

}

.main img:hover {

border: 3px solid #c8a2d4;

-webkit-transition-duration: .50s;

}

O código é super simples: 3px refere-se ao tamanho da borda, solid ao tipo da borda, #f17c9d é o código da cor (para conferir a tabela completa de cores Clica Aqui) A primeira parte do código é o que aparece sem passar o mouse e a segunda com o mouse sobre a imagem. A edição da cor é da sua preferência depois visualize se tiver tudo certinho Salve e pronto.

É isso pessoal,como diria a Mila, Beijoooooos,Até o próximo post(haha amo ela ♥)