Crear codigo para mostrar imagen con descripcion

[cloud_japan]

Buenos días.

Soy nuevo por aquí y veo que hay mucha gente que controla, quería saber si alguien es tan amable de poder ayudarme.

En mi actual web, me gustaría implantar algo como lo de esta pagina: http://www.destinydb.com/items

La idea es que al pasar el ratón por la imagen, aparezca una ventana con la descripción, como indico en la web de ejemplo.

Mi web esta con wordpress, no he encontrado ningún plugin que haga esto, por favor, alguien podría indicarme como hacer algo parecido?

Muchas gracias de ante mano.

[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