-1

I need this rollover to show text when you hover over the image. I've looked up several different tutorials, but I can't find many about adding text/captions with jQuery. Lots with using CSS3, but none with just jQuery. I've tried the following:

jQuery

//We are using $(window).load here because we want to wait until the images are loaded
$(window).load(function(){
    //for each description div...
    $('div.description').each(function(){
        //...set the opacity to 0...
        $(this).css('opacity', 0);
        //..set width same as the image...
        $(this).css('width', $(this).siblings('img').width());
        //...get the parent (the wrapper) and set it's width same as the image width... '
        $(this).parent().css('width', $(this).siblings('img').width());
        //...set the display to block
        $(this).css('display', 'block');
    });

    $('div.wrapper').hover(function(){
        //when mouse hover over the wrapper div
        //get its children elements with class description '
        //and show it using fadeTo
        $(this).children('.description').stop().fadeTo(500, 0.7);
    },function(){
        //when mouse out of the wrapper div
        //use fadeTo to hide the div
        $(this).children('.description').stop().fadeTo(500, 0);
    });

});

... with the following HTML...

HTML

<table id="intro"> 
    <tr>
        <div class="wrapper">
            <td>
                <a href="headwear.html"><img src="images/headwear.png" alt="headwear" /></a>
                <div class="description">
                    <div class="description_content">
                        This is just a test.
                    </div>
                </div>
                <a href="apparel.html"><img src="images/apparel.png" alt="apparel" /></a>
                <a href="accessories.html"><img src="images/accessories.png" alt="accessories" /></a>
            </td>
        </div>
    </tr>
</table>

... and these are the styles...

CSS

div.description{
    position: absolute; /* absolute position (so we can position it where we want)*/
    bottom: 0px; /* position will be on bottom */
    left: 0px;
    display: none; /* hide it */
    /* styling below */
    background-color: black;
    font-size: 15px;
    color: white;
}
div.description_content{
    padding: 10px;
}

div.wrapper{
    position: relative; /* important(so we can absolutely position the description div */
}
#intro {
    text-align: left;
    margin-right: 5px;
    width: 1100px;
}
#intro img {
    margin: 5px;
}

Fiddle

http://fiddle.jshell.net/yutikohercell/brxu8w8m/

Live

http://jsfiddle.net/yutikohercell/brxu8w8m/embedded/result/

1 Answer 1

0

Try this. Also remove display:none from css for div.description and add opacity : 0. FadeTo only changes the opacity, doesn't change the display as block.

$('img').hover(function() {
     $(this).closest('a').siblings('.description').fadeTo(500, 0.7); // finds the parent 'a' of the clicked element and then finds its sibling with the class 'description'.
  }, function() {
     $(this).closest('a').siblings('.description').fadeTo(500, 0);
  });

http://fiddle.jshell.net/brxu8w8m/1/

2
  • I'm still not getting this to work at all. I removed the display:none and changed it, but it's not working as it should. Dec 15, 2015 at 2:09
  • Check the fiddle for the entire logic
    – DinoMyte
    Dec 15, 2015 at 2:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.