Crear codigo para mostrar imagen con descripcion

[fede5426]

Algo asi?

http://codepen.io/fede5426/pen/bdWJPr

Código HTML:

<a href="#">
    Enlace con ventana verde
        <div id="div-uno"></div>
</a>
 
<br><br>
 
<a href="#">
    Enlace con ventana naranja
        <div id="div-dos"></div>
</a>
 
<br><br>
 
<a href="#">
    Enlace con ventana celeste
        <div id="div-tres"></div>
</a>
 

Código CSS:

div{
    width:150px;
    height:150px;
    background-color:#00A887;
    position:absolute;
    display:none;
}
 
#div-dos{
    background-color:#FF5740;
}
 
#div-tres{
    background-color:#1697DB;
}
 

Código Javascript:

$(document).on('mousemove', function(e){
    $('div').css({
       left:  e.pageX + 15 + "px",
       top:   e.pageY + 15 + "px"
    });
 
});
 
$("a").hover(   
        function(){
            $(this).children("div").css({display : "block"});
        },
        function(){
            $(this).children("div").css({display : "none"});        
        }
);
 

Les puse diferentes colores para que se vea que aparece la ventana correspondiente al enlace y que no es siempre la misma nada más, en tu caso lo que deberías hacer es solamente cambiar el contenido del div.

En el ejemplo aparece la ventana por debajo del mouse, para que aparezca por encima tenes que cambiar esta linea:

Código Javascript:

top:   e.pageY + 15 + "px"
 

por esta:

Código Javascript:

top:   e.pageY - 160 + "px"
 

Donde 160 es la altura de tu div + un pequeño margen para que esté separado del cursor. En mi caso 150px del alto del div + 10px de margen que me pareció más que suficiente.. Es cuestión de que lo vayas probando por tu cuenta.

Saludos