CODEWITHSUNDEEP
javascriptjquerycssxhtml
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

display a caption over an image using CSS and JQUERY

I have the following jsfiddle but it doesnt seem to show the caption up: http://jsfiddle.net/KumcX/189/

HTML:

<ul>
<li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></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;}

JS:

$('ul li').mouseenter(function(){
    var image= $(this).find('a 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();
});

It should show the caption, but its not.. Any ideas?

Upvotes: 0

Views: 1048

Answers (4)

styler
styler

Reputation: 16491

Just a couple of tweaks needed, first of all in your CSS you need to give your <div> a left and top position as well as some height and width which I've set to 100% to span the image and your <li> a position relative so the caption is nicely positioned over the image. Oh I also gave the <div> background an rgba color of 255,255,255,0.5 to achieve your transparent effect.

Your JS is fine but your problem in the fiddle is that you have lots of inline styles so delete those and everything should work ok from then on in.

Here's an updated fiddle: http://jsfiddle.net/KumcX/197/

And the updated CSS:

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}

​Hope this helps.

Upvotes: 0

hunter
hunter

Reputation: 63522

Refactored some of the JS, ditched the inline caption styling, and updated the css class

jQuery

$(".caption").css('opacity', 0);

$('ul li').mouseenter(function() {    
    $(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
    $(this).find(".caption").animate({ 'opacity': 0 });
});​

css

ul li {
    float:left; 
    padding:20px; 
    border:solid gray 4px; 
    margin:5px;
}
.caption {
    width: 220px;
    background: #fff; 
    height: 150px;        
    position: absolute;
}​​​

example: http://jsfiddle.net/hunter/KumcX/201/

Upvotes: 2

kuyabiye
kuyabiye

Reputation: 709

You probably copy the html with firebug,

delete the styles on the li elements.

check this http://jsfiddle.net/kuyabiye/KumcX/194/

Upvotes: 4

Ademir Mazer Jr - Nuno
Ademir Mazer Jr - Nuno

Reputation: 900

Use animate effect, configuring opacity:

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0.5});
}).mouseleave(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0});
});

Upvotes: 1

Related Questions