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.

Demonstração Download