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.
Demonstração
Download
