Efeito Hover Com Transição em Bordas nas Imagens

► +A +/- -A
Olá Pessoal, hoje neste tutorial venho ensinando como adicionar uma borda as suas imagens do Blog, nesta borda vem acompanhada com o efeito transição e Hover, ou seja o efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Como vocês percebem nas imagens do meu Blog, possui o efeito que vou ensina-los a como coloca-lo em seu blog.

Veja o exemplo:

Exemplo de Imagem:


Aplicando no Blog


Caso você use algum outro efeito nas imagens em seu blog, você terá que saber o local correspondente as imagens do seu blog, ou seja:
1. Vá em modelo
2. Em seguida ir em Editar HTML
3. E procurar pelo seguinte código:

.post-body img

Ao achar este código que citei acima você devera seleciona-lo ( Todo ele ) Desde da propriedade inicial até a propriedade "Hover" Final, e substitui-lo por este código abaixo:


.post-body img {padding: 6px ;background: transparent ;-webkit-transition: all 0.8s ease ;border: 1px solid #CECECE ;-moz-border-radius:3px;-webkit-border-radius:3px;-goog-ms-border-radius:3px;border-radius:3px;transition: all 0.5s ease ;-webkit-transition: all 0.8s ease ;-o-transition: all 0.10s ease ;-moz-transition: all 0.9s ease;}.post-body img:hover {opacity:1 ;border: 1px solid #000000;}
A parte destacada de Azul é referente a cor da borda, a outra parte destacada de Vermelho corresponde a cor da borda em estado Hover.

Caso você não use nenhum efeito nas imagens do seu Blog, você terá que:
1. Ir na opção modelo
2. Em seguida, ir na opção Editar HTML
3. E procurar pela seguinte tag:


]]></b:skin>




Ao Localiza-la você terá que adicionar o seguinte código ACIMA dela: 


.post-body img {padding: 6px ;background: transparent ;-webkit-transition: all 0.8s ease ;border: 1px solid #CECECE ;-moz-border-radius:3px;-webkit-border-radius:3px;-goog-ms-border-radius:3px;border-radius:3px;transition: all 0.5s ease ;-webkit-transition: all 0.8s ease ;-o-transition: all 0.10s ease ;-moz-transition: all 0.9s ease;}.post-body img:hover {opacity:1 ;border: 1px solid #000000;}

Como citei acima, a parte destacada de Azul é referente a cor da borda, a outra parte destacada de Vermelho corresponde a cor da borda em estado Hover.
► Postagens Relacionadas:

6 Comentários

MiKael disse...

Muito bom Caio, apenas fiz algumas outras modificações mas graças a este código ele serviu de base, ótimo post.
Parabéns.

9 de janeiro de 2012 às 17:45
Caio Vinicius disse...

Que bom que gostou.
Obrigado por comentar!

9 de janeiro de 2012 às 18:03
Thomaz disse...

Teria como fazer isso só que em uma única imagem? Ou na sidebar?

13 de janeiro de 2012 às 02:12
Caio Vinicius disse...

Olá Thomaz, lamento, mas não tem como fazer isto, desculpe-me não poder ajuda-lo.
Abraços, Caio.

13 de janeiro de 2012 às 09:17
Ericson disse...

Perfeito. Valew Tecnoblog!

25 de junho de 2012 às 17:33
Caio Vinicius disse...

Olá Ericson, não há de que amigo, ficamos gratos em saber que nosso trabalho o agrada! Até mais, Abraços, Fica com Deus!

26 de junho de 2012 às 14:16

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!