Mostrar imagem ao passar mouse sobre link

O efeito de mostrar uma imagem quando ao passar o mouse sobre um link trás uma forma bem interessante e elegante de mostrar informações adicionais sobre aquele determinado link, pois bem, isso não é não é algo difícil de se fazer.

Para esse efeito usaremos apenas CSS, mas lembrando que pode ser feito de diferentes maneiras, como usando jQuery ou JavaScript, mas como o resultado usando CSS já é satisfatório, não vejo necessidade de utilizá-los.

Bom, chega de papo e vamos lá!

O HTML

Vamos começar com o nosso HTML, usarei um HTML bem simples para demonstrar:


<ul>
    <li>
        <a href="#">Gato<span><img src="images/gato.jpg" alt="gato" /></span></a>
    </li>
    <li>
        <a href="#">Cachorro<span><img src="images/cachorro.jpg" alt="cachorro" /></span></a>
    </li>
    <li>
        <a href="#">Papagaio<span><img src="images/papagaio.jpg" alt="papagaio" /></span></a>
    </li>
    <li>
        <a href="#">Coruja<span><img src="images/coruja.jpg" alt="coruja" /></span></a>
    </li>
    <li>
        <a href="#">Rato<span><img src="images/rato.jpg" alt="rato" /></span></a>
    </li>
</ul>

O CSS

Agora um CSS básico, apenas para estilizar um pouco...


* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
ul {
    margin: 20px 0 0 20px;
    list-style: none;
}
a {
    position: relative; /* Para que a imagem não saia fora do link */
    display: block;
    width: 100px;
    padding: 5px 0;
    border:1px #999999 solid;
    background-color: #CCCCCC;
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    background-color: #999999;
}

Até o momento, estão aparecendo as imagens, então o próximo passo é oculta-las.

Agora você tem que ter em mente, que o que você quer ocultar esteja dentro da tag a, estou usando um span, e como a imagem está dentro desse span, ao ocultar o span também ocultaremos nossa imagem, então vamos ocultar a tag span.


a span {
    display: none; /* Aqui você define que todo SPAN que estiver dentro de um A estará invisível */
}

Agora que já ocultamos nossa imagem que está dentro do span, colocaremos a regra hover no link, que fará a imagem aparecer ao passar o mouse sobre o link...


a:hover span {
    display: block; /* Tranforma o SPAN em um elemento do tipo bloco */
    position: absolute; /* Para você poder posicionar a vontade, sem quebrar o layour em volta */
    top: 0px; /* Para ficar na mesma altura do link */
    left: 100%; /* Empurra a imagem para fora do link, ficando a lado do mesmo */
    border: 1px #CCCCCC solid; /* Estilo extra, lembrando que você pode colocar qualquer estilo nesse elemento */
}

E é isso, simples não? Essa técnica de ocultar e mostrar imagens também pode ser utilizada em qualquer elemento, como div, p, span, etc... Você pode conferir o resultado final no link abaixo, ou fazer o download do código se preferir.

Publicidade

Gostou? Compartilhe com seus amigos!

Ícone Facebook Ícone Twitter Ícone Linkedin
Comentários

Comentários

Tata Tata
Seta comentário
Muito bom, Parabens!
Responder Postado em: 20/08/2016 23:55:46
Sergio Batista Sergio Batista
Seta comentário
Muito obrigado pelo post.
Mais uma dúvida, eu testei o código e está perfeito porém, se tiver mais um menu ao lado deste a foto selecionada aparecerá por trás dele.
Como sanar este probleminha?
Responder Postado em: 28/09/2016 10:36:27
Everson da Luz Everson da Luz
Seta resposta
Obrigado Sergio,
basta você adicionar um z-index para o elemento span, o z-index irá dizer qual elemento ficará na frente, o que tiver o maior valor ficará na frente.

a:hover span {
   z-index: 10;
}
Postado em: 28/09/2016 19:54:33
Alexandre Aquino de Moraes Alexandre Aquino de Moraes
Seta comentário
Muito bom camarada, estou colocando isso num site, mas to com uma dúvida que não consigo resolver, como faço para as imagens ficarem aparecendo sempre no mesmo lugar? colocando top=0px; as imagens ficam acompanhando os links.
Responder Postado em: 29/09/2017 19:39:13
Everson da Luz Everson da Luz
Seta resposta
Obrigado, para deixar as imagens sempre no mesmo local, você deve mudar a referencia que ela vai se posicionar, no meu exemplo ela esta se posicionando referente ao pai que é o elemento "a", então primeiramente retire do "a" o position: relative.

Com isso a imagem vai se posicionar com o primeiro pai que não seja static. Coloque o position : relative no elemento "ul", também coloque o "ul" como float, assim já deve resolver
Postado em: 30/09/2017 19:42:53
Alessandro Alessandro
Seta comentário
Muito bom amigo, gostaria que você me ajudasse com outra duvida, utilizo Wordpress e gostaria que aparecesse uma imagem atras do link do menu quando passar o mouse, uma pequena imagem como uma gota d'água, o site é relacionado a caixas d'água. É como se, ao invés de mudar a cor do quadradinho atras no menu aparecesse essa pequena imagem de uma gota d'água.
Responder Postado em: 01/02/2018 13:55:45
Everson da Luz Everson da Luz
Seta resposta
Obrigado Alessandro, isso não é muito difícil, basta usar as propriedades background-image e background-position, por exemplo:

.link {
    background-image: url("imagem.jpg");
    background-position: center;
}

Da uma pesquisada sobre essas propriedades que você irá conseguir fazer o que deseja.
Postado em: 03/02/2018 19:54:46
michel clemer monteiro deolino michel clemer monteiro deolino
Seta comentário
coloquei os nomes um ao lado do outro, entretanto quando passo o mouse as imagens aparecem a direita. Como colocar as imagens para aparecer em baixo??grato!
Responder Postado em: 08/06/2018 14:12:26
Everson da Luz Everson da Luz
Seta resposta
Olá Michel, você deve alterar o span:hover, ficando assim:

a:hover span {
    display:block;
    position:absolute;
    top: 30px;
    left: 0;
    z-index: 10;
    border:1px #CCCCCC solid;
}

No seu caso mudei o left para 0 para ficar colado a esquerda, alterei o top para 30px, não sei qual é o tamanho do seu menu mas tem que ser o tamanho da altura dele, e coloquei o z-index para ficar na frente dos elementos.
Postado em: 09/06/2018 15:41:52
Ademilson Ademilson
Seta comentário
Boa tarde amigo. Será que vc poderia me ajudar?
Eu tenho um link em uma pagina, e quero; quando clicar nele, apareça uma foto em uma div ao lado.

tipo:
foto1
foto2
foto3

quando eu clicar em uma delas, apareça a foto em uma div do lado.

Obrigado.
Responder Postado em: 29/11/2018 15:47:18
Alencar Alencar
Seta comentário
Quando eu passo o mouse numa imagem (img) que tem o title="xxx", aparece o xxx quando eu passo o mouse sobre a imagem.
Não tem como, desta mesma forma simples, aparecer uma imagem qualquer em vez do texto, quando eu passar o mouse?
Responder Postado em: 11/06/2019 18:00:36
Everson da Luz Everson da Luz
Seta resposta
Alencar, o title que aparece é um padrão do navegador, qualquer elemento que tenha o title definido, ao passar o mouse vai aparecer o texto.
O que você pode fazer é desabilitar esse comportamento com CSS ou JS, por exemplo:

pointer-events: none;

Agora para aparecer uma imagem, basta fazer parecido com o exemplo, coloque uma imagem oculta do lado da outra, dentro de uma div:

<div>
    <img src="img1.jpg" alt="img 1">
    <img src="img2.jpg" alt="img 2" class="oculta">
</div>

No CSS faça:

.oculta {
  display: none;
}
img:hover ~ .oculta {
  display: block;
}

O "~"  significa os irmãos do elemento
Postado em: 11/06/2019 22:21:37
Alencar Alencar
Seta comentário
Resposta ao Ademilson:
Você deve criar instruções para abrir uma Janela POP-up utilizando a Tag: a
O modelo abaixo faz o que você pediu no seu comentário. Troque os endereços das imagens e os textos. Acho que isso resolve o seu problema.

<a style="text-decoration:none;" href="#;" onclick="window.open('https://palavraquesalva.files.wordpress.com/2019/06/relogio.gif','Imagem','width=454,height=340')">Relógio</a><br/>

<a style="text-decoration:none;" href="#;" onclick="window.open('https://palavraquesalva.files.wordpress.com/2014/04/cavalo.gif','Imagem','width=454,height=340')">Cavalo</a><br/>

Os modelos padrões com mais recursos são mais ou menos esse abaixo:
<a href="#;" onclick="window.open('http://palavraquesalva.wordpress.com', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=770, HEIGHT=400');">Clique para abrir uma Janela POP-up com uma Página de Internet</a>
<br/>
<a href="#;" onclick="window.open('https://cobramil.files.wordpress.com/2016/08/motor-calor.gif', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=445, HEIGHT=250');">Clique para abrir uma Janela POP-up com uma Imagem</a>
Responder Postado em: 11/06/2019 18:33:17
david alves david alves
Seta comentário
Ola Everson da Luz, seu post me salvou quase que 100%, era o que eu buscava, porem tem um pequeno problema que eu não to conseguindo arrumar e espero que você me ajude pois isso ira salvar minha vida kkkkkkk.
Eu estou criando um site que nele ira ter muitas imagens no tamanho de 40 x 40 pixel, e quando a pessoa passar  o mouse em cima da imagem ira aparecer a imagem ampliada no tamanho grande tipo uns 640 x 640 pixel, e isso eu já consegui fazer aparece bem certinho porem, as imagens que estão do lado esquerdo do site estão bem por que ao passar o  mouse a imagem ampliada aparece a direita, mas as imagens que estão  no canto direito do site ao passar o mouse a imagem ampliada também aparece a direita fazendo com que ela saia pra fora do layout criando uma barra de rolagem, eu queria que quando passar o mouse da imagem na direita ela aparecesse na esquerda para que ela não saia fora da div e saia fora do site criando a barra de rolagem pois não tem como ver a imagem completa.
Basicamente eu queria um código que fosse inteligente que se ele ver que tem espaço para ele aparecer na direita ele apareceria normalmente porem que se ele ver que a imagem ampliada fosse sair  da div pai que tem 2000px ele automaticamente iria aparecer na esquerda para que não saia do layout. 
Espero que você possa me ajudar.
Responder Postado em: 13/07/2019 12:23:06
Everson da Luz Everson da Luz
Seta resposta
Basicamente o que você tem que fazer para aparecer na esquerda é substituir o "left: 100%" por right: "100%".
Então você pode criar classes com left e outra com right, e colocar nos elementos dependendo de onde eles estejam.

Porém se você quer identificar automaticamente a distância, você deverá utilizar JavaScript, fiz um exemplo para você ver. Basta diminuir o tamanho da div pai, para ver que irá aparecer a imagem na esquerda.

exemplo:
https://jsfiddle.net/zufwgyLr/3/
Postado em: 13/07/2019 18:43:50
david alves david alves
Seta resposta
Everson da Luz muito obrigado, acabei de chegar do trabalho e a primeira coisa que fiz foi ligar o pc e ver se você tinha respondido kkkkk. olhei o script que você fez e era isso mesmo que eu estava quebrando a cabeça para fazer, vou adaptar ele em meu site pois eu tentei criar varias divs porem os dados ira ser puxado do bando de dados e eu não consegui fazer com varias divs pois as posições muda das imagens, mas esse que você me deu acho que ira funcionar 100% com o que eu preciso, muito obrigado você é nota 1000.
Postado em: 13/07/2019 23:14:34
david alves david alves
Seta comentário
Copiei o código exatamente como você criou e não funcionou, se rodar no jsfiddle.net ele funciona normalmente porem quando crio os arquivos para rodar no wampserver ele não funciona sabe o motivo?
Responder Postado em: 14/07/2019 11:57:30
Éverson da Luz Éverson da Luz
Seta resposta
Não tem como eu saber exatamente o que é, provavelmente está ocorrendo um erro de JS. Abra o console do Chrome apertando Ctrl + Shift + i, vá na aba console e veja se não tem algum erro lá.
Postado em: 14/07/2019 16:39:45
david alves david alves
Seta resposta
eu mudei nada do seu código só criei os arquivos .html um .css e um .js  e colei os códigos que estão aqui https://jsfiddle.net/zufwgyLr/3/
 foi um copiar e colar e não funcionou no navegador, fiz o que vc falou e fiquei 5 horas tentando achar na internet como arrumar porem não consegui, o erro que mostra no console do Chrome é jsscript.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null
na primeira linha do código que é esse aqui.
document.querySelector('.div-pai a').addEventListener('mouseover', function (event) {
Postado em: 14/07/2019 23:34:20
Éverson da Luz Éverson da Luz
Seta resposta
Está dando esse erro porque o seu JS está sendo executado antes da tag com a classe ".div-pai" seja carregada.
Para resolver isso você deve colocar a chamada do seu arquivo JS no final da tag body.

Ou também pode executar o JS, após o carregamento da página, utilizando essa função:

window.onload = function() { 
// código aqui
 }

Cole o código JS do exemplo dentro da função.
Postado em: 15/07/2019 11:51:58
Eu Eu
Seta comentário
Olá.  Estou sendo vitima destas manobras. Bem nas datas que vc posta e recebe comments. Pode me ajudar a limpar meu sistema?  Sei que nem preciso enviar dados.
Responder Postado em: 03/12/2019 23:45:21
Comentários

Deixe um comentário

Subir Página