java
sql
html
iphone
css
c
xml
python
visual-studio
eclipse
silverlight
html5
perl
algorithm
cocoa
tsql
mvc
api
jsp
postgresql
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.
Removed link.... site no longer exists
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.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'); }); });
maybe something like this http://jsfiddle.net/konglie/SXFEn/