Show text when cursor is over image

Question

I am trying to complete the task of displaying text below an image when you hover over it. I do not want to use the attribute titlebecause I want to be able to style text.

Example: Dribbble . When you hover over some of the images, the PRO text appears next to the name of the person who posted the image

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

, , . , . , .

Answer 2

div, , div , .

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

Answer 3

, . div div, div , css div, ur. . , .

Answer 4

I think you need to use the jquery hint. Below are links where you can find the best tooltips.

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

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

Answer 5

$(function() {

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

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

});

Answer 6

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