Mostrar imagem ao passar mouse sobre link

Como fazer uma lista que ao passar o mouse sobre os links, aparece uma imagem ao lado, consegui esse tutorial na internet pelo link: www.eversondaluz.com.br/mostrar-imagem-ao-passar-mouse-sobre-link  

Fiz algumas adaptações, mas ficou bem legal. Pode ser modificado e personaliado. Segue o tutorial:

<div id="pettabs" class="indentmenu"><ul>

<li><a href="#">Nome #1<span><img src="IMAGEM" alt="gato" /></span></a></li>

<li><a href="#">Nome #2<span><img src="IMAGEM" alt="gato" /></span></a></li>

<li><a href="#">Nome #3<span><img src="IMAGEM" alt="gato" /></span></a></li>

<li><a href="#">Nome #4<span><img src="IMAGEM" alt="gato" /></span></a></li>

<li><a href="#">Nome #5<span><img src="IMAGEM" alt="gato" /></span></a></li>

<li><a href="#">Nome #6<span><img src="IMAGEM" alt="gato" /></span></a></li>  

<li><a href="#">Nome #7<span><img src="IMAGEM" alt="gato" /></span></a></li>   

</ul></div>   

<style>

.main-inner .column-center-outer {  }   

.indentmenu *{

margin:0px;     

padding:0px;     

border:0px; } 

.indentmenu ul{     

margin: 20px 0 0 20px;    

list-style:none; 

}   

/* Menu de nomes ------------------------------- */ 

.indentmenu a{  

position: relative; /* Para que a imagem não saia fora do link */ 

display: block; /* Exibir em bloco */ 

width: 251px;  /* Altura do menu */ 

height:;  /* Largura do menu */ 

padding:5px 0; 

font-family:Quicksand; 

text-align: left; /* Alinhamente do texto */ 

font-size:16px;

color:#ccc; /* Cor do texto */ 

text-indent : 4px; 

background-color:#000; 

text-decoration:none; 

border-left: 3px solid #ebe3d7; /* Borda */ } 

indentmenu a:hover{ 

background-color:#999999; }     

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

a:hover span{ display:block; /* Aqui você diz que ao passar o mouse sobre o link, colocar um display no span dentro desse link */ position:absolute; /* Para você poder posicionar ao queira, 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 ao seu lado */  } 

img {

width: 251px;  /* Altura do menu */ 

height:251px;  /* Largura do menu */ 

border:1px #CCCCCC solid; /* Estilo extra, lembrando que você pode colocar qualquer estilo nesse elemento */ }    

</style>

_______________________________________________

Segundo modo de fazer o menu:

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

<style>

* {

    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;

}

a span {

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

}  

  

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 */

}  

<style/> 

Créditos: