Show text when the cursor hovers over an image

Question

I am trying to accomplish of the task of displaying text below an image when you hover over it. I do not want to use the title attribute, because I want to be a

Answer 1

Check out this quick JS FIDDLE.

Your HTML

<ul>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption"><span>this is my caption</span></div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/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;}

and your 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();
});

This should give you an idea of how to achieve what your looking for. It obviously could be improved. Hope it helps.

Answer 2

I think you have to use jquery tooltip for that. Below are the links from where you can find the best tooltip plugins.

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

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

Answer 3

give your text inside a div and then show that div on hover of image like this..

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

Answer 4

$(function() {

    $('.bar').css({opacity:0});

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

});

Answer 5

maybe something like this http://jsfiddle.net/konglie/SXFEn/

Answer 6

Define a function with the argument as the text you want to display on hovering the image. Then in that function you dynamically create a div and place the text within that div and also dynamically position the div according to the mouse pointer position and you can also add css for the div give ur styling effects. Call this function on the mouseover of the image. Hope this helps you.