Всплывающая картинка при наведении на ссылку
<br>
<a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="http://psj.ru/upload/iblock/72b/96f77c235a2c023695b3e4515f4e4a80_854.jpg" width="500"/></span></a>
<br>

Всплывающая картинка при наведении на картинку
<br>
<a class="thumbnail" href="#"><img src="http://psj.ru/upload/iblock/72b/96f77c235a2c023695b3e4515f4e4a80_854.jpg" width="270px" height="200px" border="0" /><span><img src="http://psj.ru/upload/iblock/72b/96f77c235a2c023695b3e4515f4e4a80_854.jpg" />Ваш текст</span></a>

<style>
/*Всплывающий скриншот*/ 
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px; 
-moz-border-radius: 4px 4px 4px 4px; 
-webkit-border-radius: 4px 4px 4px 4px; 
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*---------------------*/

</style>