Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

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!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

17 Comentários

  1. Guilherme Alves disse:

    Teu site é de mais… =]
    Parabéns

  2. Gorddin disse:

    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

  3. Rafael V disse:

    Mas eu quero mudar o background da imagem, pois o meu em ve de borda tem um bg cinza maior que a imagem

  4. @djkieronny disse:

    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

  5. ??i¢a judd ? ™ disse:

    [aaaaaaaaaaaaaaaa] Obrigadaa *-*
    Ajudou mtãão!

  6. johnathan kennedy (: disse:

    resolveu o meu problema, thanks *.*

  7. .:: Clau ::. disse:

    musicaliteraturacinema
    Lamento, mas não há como eu saber o que ocorre no seu template, sendo assim, não tenho como te ajudar.

  8. musicaliteraturacinema disse:

    Oi, Clau. O meu não deu certo, quando coloco o código
    no html/javascript de gadget aparece duas imagens.

  9. Kevvin Oliveira disse:

    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.

  10. Kevvin Oliveira disse:

    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!

  11. .:: Clau ::. disse:

    Kevvin
    No artigo eu já expliquei que deverá acrescentar uma condicional no local onde você quer que o efeito se aplique. Releia o tutorial.

  12. Kevvin Oliveira disse:

    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!

  13. Kevvin Oliveira disse:

    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!

  14. Kevvin Oliveira disse:

    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/

  15. .:: Clau ::. disse:

    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 {
    }

  16. Kevvin Oliveira disse:

    Como posso aplicar esse efeito em todas as imagens altomaticamente? Tem como?

  17. Christiano Augusto disse:

    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

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.