CODEWITHSUNDEEP
javascriptjquerycss
syrkull
syrkull

Reputation: 2344

Show text when the cursor hovers over an image

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 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

Upvotes: 5

Views: 37039

Answers (6)

Lee
Lee

Reputation: 3329

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

Upvotes: 0

Amin Eshaq
Amin Eshaq

Reputation: 4024

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.

Upvotes: 2

daryl
daryl

Reputation: 15197

$(function() {

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

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

});

Upvotes: 0

munjal
munjal

Reputation: 1404

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/

Upvotes: 0

AmGates
AmGates

Reputation: 2123

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.

Upvotes: 0

Vivek
Vivek

Reputation: 11028

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

Upvotes: 0

Related Questions