Efeitos CSS Efeitos Imagens Vanessa S.
Incluir Efeito Hover em Bordas nas Imagens do Blog
O efeito Hover em Bordas, muda a aparência de um item quando passamos o mouse em cima dele.
Usando CSS no Blogger, você pode adicionar estilos diferentes para suas imagens, inclusive adicionar bordas com efeito hover em determinadas imagens ou banners, para isto basta definir estilos aos elementos, incorporando-os no CSS do seu template.
Veja a seguir alguns exemplos de imagens com efeito hover na borda:
Para ativar o efeito do exemplo 1:
Vá no menu “modelo” >> Editar HTML , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class’. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>
.border1 img{
padding: 5px;
background: #ffffff; /*Edite a cor de fundo*/
border: 1px solid #54692A; /*Edite a cor de borda*/
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF; /*Edite a cor de fundo*/
border: 4px double #9C192A; /*Edite a cor de borda*/
}
Para ativar o efeito do exemplo 2:
Vá no menu “modelo” >> Editar HTML , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class’. Copie o código abaixo e cole-o ANTES da tag ]]></b:skin>
.border1 img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.border1 img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:#8B795E; /*Edite a cor de fundo*/
border:3px solid #000000; /*Edite a cor de borda*/
margin:2px 2px 2px;
}
Cada vez que quiser adicionar o efeito hover em bordas em alguma imagem é necessário que você hospede as imagens que irá utilizar.
Feito isto, você precisará aplicar as propriedades a cada imagem, separadamente, e deverá acrescentar uma condicional no local onde você quer que o efeito se aplique.
Você pode aplicar este efeito nas imagens que quiser: em alguma banner na sidebar, ou nos posts, ou em banners no footer.
Por exemplo: para aplicar este efeito em uma imagem na sidebar, no modo “adicionar gadget” , escolha o tipo “html/javascript” e acrescente o código:
<div class="border1"><img src="URL-DA-IMAGEM"/></div>
Aplicar o efeito a todas as imagens dos posts automaticamente
Se quiser aplicar este efeito hover nas bordas das imagens dos posts, basta incluir os códigos com os estilos CSS, desta forma:
.post-body img{
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
margin:2px 2px 2px;
}
.post-body img:hover {
padding:3px 4px;
list-style:none;
display:block;
overflow:hidden;
background:XXXXXX; /*Coloque a cor de fundo*/
border:3px solid #XXXXXX; /*Coloque a cor de borda*/
margin:2px 2px 2px;
}
Use a imaginação e boa sorte!
Teu site é de mais… =]
Parabéns
Clau, tipo, eu posicionei os banners dos parceiros do meu blog, em 3×2 mas quando eu aplico esse efeito, fica em 6×1 e eu já tentei ajustar, mas as imagens continuam apenas na vertical, se puder me ajudar, desde já agradeço
Mas eu quero mudar o background da imagem, pois o meu em ve de borda tem um bg cinza maior que a imagem
Quase não consigo por o efeito na sidebar porque você mandou o codigo como uma div mais não é basta acrescentar border='1px' entes de src nada de div
[aaaaaaaaaaaaaaaa] Obrigadaa *-*
Ajudou mtãão!
resolveu o meu problema, thanks *.*
musicaliteraturacinema
Lamento, mas não há como eu saber o que ocorre no seu template, sendo assim, não tenho como te ajudar.
Oi, Clau. O meu não deu certo, quando coloco o código
no html/javascript de gadget aparece duas imagens.
Oi Clau! Você sabe dizer como aplicar esse efeito direto na folha HTML? Em vez de ir no 'Editar HTML', usar o efeito direto na imagem que queira, sem incluir o CSS no Blog.
Ah… não consegui Clau, mas vou tentar o máximo que puder. Se você atualizar o post ensinando a dar estilo as imagens da siderbar, me fale ok? Abraços!
Kevvin
No artigo eu já expliquei que deverá acrescentar uma condicional no local onde você quer que o efeito se aplique. Releia o tutorial.
Olá Clau! Espero não está atrapanhando você, mas tenho mais uma dúvida. Gostaria de saber como aplicar esse efeito na siderbar, apesar de eu usar o código para aplicar o efeito, ele não aparece, e eu já coloquei o CSS acima de ]]>. Como faço para aplicar o efeito nas imagens da siderbar?
Abraços!
Olá Clau! Apenas uma pequena observação. Para quem usa os templates do designe de modelo, o cógico irá ficar assim:
Subistitue-se .post img{ por .post-body img{ e .post img:hover { por .post-body img:hover {
Apenas uma dica ok? Abraços!
Muito Obrigado Clau! Você me ajudou muito =). Parabéns pelo seu site! O melhor, na minha opnião. Espero que continue para sempre.
Abraços! \o/
Kevvin Oliveira
Tem sim querido…se vc quiser aplicar o efeito em todas as imagens dos posts é só incluir os códigos do efeito em:
.post img {
}
.post img:hover {
}
Como posso aplicar esse efeito em todas as imagens altomaticamente? Tem como?
Consegui fazer,o rescultado ficou excelente,até melhor do que eu esperava.Esse tutorial me ajudou muito.Obrigado.
Confira o resultado.
http://www.heroisdanet.com