Question

I’m trying to find a simple way with jquery to add a transparent caption to selected images that either slides or fades, using either the alt or title attribute (whichever would be better practice), that also doesn’t add additional divs.

Does anyone have a simple way to do this that they can think of?

Answer 1

I’ve used this method before. Seems to work pretty well, and you’re not creating and deleting elements constantly, just moving and changing the contents of one.

See the working Fiddle

Start with your single empty div:

<div id='caption'></div>

The JS:
Event listeners on hover and mouseout, to position the div, write the caption, and fade it in.

$('img').hover(function(){
    var yoffset = $(this).height();
    var width = $(this).width();
    var coords = $(this).offset();

    $('#caption').html($(this).data('caption'))
        .width(width)
        .animate({
            top: coords.top + yoffset - $('#caption').height(),
            left: coords.left            
        }, 0, function(){
            $(this).animate({
                opacity: 'show'
            }, 200);   
        });
});

$('img').mouseout(function(){
    $('#caption').animate({
        opacity: 'hide'
    }, 100);   
});

The CSS for that div: Absolutely positioned so you can place it anywhere, make sure it’s not nested inside another div to make sure this works the way it should.

#caption {
    position: absolute;
    z-index: 99;
    display: none;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px;  
}

As for whether you use the title or alt attributes, you could and use .attr instead of .data, but this way you can specify the caption text without hurting anything. HTML5 data attributes are used as follows with jQuery

<img src='#' data-caption='This is some caption text' />

and then accessed like so:

$('img').data('caption'); //returns our caption text