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:
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.
6 Comentários
Muito bom Caio, apenas fiz algumas outras modificações mas graças a este código ele serviu de base, ótimo post.
9 de janeiro de 2012 às 17:45Parabéns.
Que bom que gostou.
9 de janeiro de 2012 às 18:03Obrigado por comentar!
Teria como fazer isso só que em uma única imagem? Ou na sidebar?
13 de janeiro de 2012 às 02:12Olá Thomaz, lamento, mas não tem como fazer isto, desculpe-me não poder ajuda-lo.
13 de janeiro de 2012 às 09:17Abraços, Caio.
Perfeito. Valew Tecnoblog!
25 de junho de 2012 às 17:33Olá 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:16Postar 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!