Mostrar text cuando el cursor se desplaza sobre una image

Estoy tratando de lograr la tarea de mostrar text debajo de una image cuando pasas el cursor sobre ella. No quiero usar el atributo de title porque quiero poder darle estilo al text.

Un ejemplo sería en Dribbble . Cuando pasa el cursor sobre algunas de las imágenes, aparece el text PRO al lado del nombre de la persona que publicó la image

Mira esta rápida JS FIDDLE .

Tu HTML

 <ul> <li> <div class="caption">this is my caption</div> <img src='http://img.javascriptes.com/javascript/empirestate02_d_teaser.png?1314126367'/> </li> <li> <div class="caption">this is my caption</div> <img src='http://img.javascriptes.com/javascript/empirestate02_d_teaser.png?1314126367'/> </li> <li> <div class="caption">this is my caption</div> <img src='http://img.javascriptes.com/javascript/empirestate02_d_teaser.png?1314126367'/> </li> <li> <div class="caption"><span>this is my caption</span></div> <img src='http://img.javascriptes.com/javascript/empirestate02_d_teaser.png?1314126367'/> </li> </ul> 

Css

 ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;} ul li div{display:none; background:white; opacity:.5; position:absolute;} 

y tu javascript

 $('ul li').mouseenter(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeIn(); }).mouseleave(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeOut(); }); 

Esto debería darle una idea de cómo lograr lo que está buscando. Obviamente se podría mejorar. Espero eso ayude.

da tu text dentro de un div y luego muestra ese div en el movimiento de la image como este …

 <div id="div">Hiiii</div> $('#img').live('mouseover', function(){ $('#div').show(); }); 

Defina una function con el argumento como el text que desea mostrar al desplazar la image. Luego, en esa function crea dinámicamente un div y coloca el text dentro de ese div y también posiciona dinámicamente el div de acuerdo con la position del puntero del mouse y también puede agregar css para los efectos de estilo del div. Llame a esta function en el mouseover de la image. Espero que esto te ayude.

Creo que tienes que usar jquery tooltip para eso. A continuación se muestran los enlaces desde donde puede encontrar los mejores plugins de información sobre herramientas.

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

http://slodive.com/web-development/best-jquery-tooltip-plugins/

 $(function() { $('.bar').css({opacity:0}); $('.foo').hover(function() { $('.bar').stop().animate({ opacity: 1 },'fast'); },function() { $('.bar').stop().animate({ opacity: 0 },'fast'); }); }); 

tal vez algo como esto http://jsfiddle.net/konglie/SXFEn/