Posts Recentes

Como colocar uma imagem em hover

28 de fevereiro de 2018


Sabe quando tem uma imagem em determinado site/blog e quando passamos o mouse em cima ela muda de cor? Então esse efeito nomeia-se hover. Já reparou nos ícones das minhas redes sociais ali na sidebar? é rosinha, e quando passamos o mouse o ícone fica azul.
Esse efeito é simples de ser implantado e dá um tchã total.
Se liga no quanto é fácil.

❥ Você vai utilizar o seguinte código:
<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

Legenda:
ENDEREÇO-DO-LINK - Aqui você vai colocar o link do site em que será redirecionado ao clicar na imagem.
ENDEREÇO-DA-IMAGEM-1 
ENDEREÇO-DA-IMAGEM-1 - A primeira imagem é a que vai aparecer quando o mouse não está por cima dela. 
Nota-se que precisará repetir esse link duas vezes.

ENDEREÇO-DA-IMAGEM-2 - E enfim colocamos o link da imagem que vai aparecer quando passarmos o mouse.
Exemplo, como citei acima, uso esse efeito nos ícones de rede social.


Comentários
15 Comentários

15 comentários :

  1. Super bacana seu tutorial. Esse efeito é muito bonito nos links! Super didático como ensinou! Amei!

    ResponderExcluir
    Respostas
    1. ah fico bem feliz que tenha gostado, normalmente tento deixar o tutorial bem facinho mesmo do jeito que eu iria gostar de achar na internet kkkk.

      Excluir
  2. Tutorial muito bacana!! Uso bastante no meu blog! Principalmente para fazer as categorias do post! Parabéns!

    ResponderExcluir
    Respostas
    1. um efeito simples e legal pra ser usado kk, melhor que isso não tem kkk.

      Excluir
  3. Que maneiro, muito útil. Obrigada pelo tutorial! Agora colocarei em prática, haha!! Gostei da forma em que ensinou. Beijos!

    ResponderExcluir
    Respostas
    1. aaaawn fico muito feliz em saber que meu post ajudou alguém, de verdade <3

      Excluir
  4. ate hoje eu ainda estou aprendendo muita coisa sobre esse mundo de blog mais sempre achei muito bonito imagem em hover gostei do jeito que voce ensinou

    ResponderExcluir
    Respostas
    1. já blogo faz uns 6 anos e ainda assim sempre aprendo algo novo, são tantas funcionalidades legais que a gente até se perde kkk. E fico feliz que tenha gostado.

      Excluir
  5. Adorei seu post! Ajuda demais esses tutoriais! <3

    ResponderExcluir
  6. Olá adorei! Adoro tutoriais que ajudam a dar aquele charme a mais para o blog! Adorei!!!

    ResponderExcluir
  7. Dessa eu não sabia, gostei demais e já salvei aqui quando eu for precisar

    ResponderExcluir
  8. Dica super valiosa! Eu sempre uso esse efeito no meu blog ou em algum trabalho. Legal sua iniciativa de ensinar pro pessoal como se faz, pois pelo que vi um tempo atrás, só tem tutoriais mais antigos e nem tão funcionais. Sua explicação foi bem simples e clara.
    Beijos

    ResponderExcluir
  9. Mas esse tutorial é pra Wordpress? O meu é wix. Mas achei muito bom saber mais sobre o assunto.

    ResponderExcluir
  10. Parabéns! Eu até então não sabia como fazer isso. Já vou utilizar em meu blog.

    ResponderExcluir
  11. muito útil p mim, acho lindão... Vou tentar por no meu.

    ResponderExcluir