I am trying to acplish 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 able style the text.

An example would be at Dribbble. When you hover over some of the pictures, the text PRO shows up next to the name of the person that posted the picture

I am trying to acplish 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 able style the text.

An example would be at Dribbble. When you hover over some of the pictures, the text PRO shows up next to the name of the person that posted the picture

• javascript
• jquery
• css

• I think, You want to add tooltip? – talha2k Commented Aug 24, 2011 at 5:20
• hmmm. no ... I am trying to create games covers and when you place the mouse on them ... the name of the game appears in the middle of the image – syrkull Commented Aug 24, 2011 at 5:22
• something like this : dribbble. – syrkull Commented Aug 24, 2011 at 5:23

6 Answers 6

Check out this quick JS FIDDLE.

Your HTML

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

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

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.

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./css/stylish-jquery-tooltip-plugins-webdesign/

http://slodive./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');
    });

});

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