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 AquiA 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 ♥)


2 comentários:

  1. oie, poderia me ajudar? veja esse post:
    http://fabiolucas92.blogspot.com.br/2013/02/campanha-meta-de-200-seguidores.html

    Thankss :*

    ResponderExcluir

 
Layout feito por Adália Sá | Não retire os créditos