You can see a working demo of this tutorial on this page.

Let's start with the CSS and HTML markup. To make this script work you will need to follow the structure of a box for every single image. Create a div container with the CSS class box. Using this class our script will know where to register a hover event for images. Paste an image and another div container with the CSS class caption as children. The CSS for this example is pretty straight forward. Position the box container relatively and the caption container absolutely. To get a nice transparent effect I used opacity.

CSS Code

* {
    font-family: Arial, sans-serif;
}    
.box {
    position: relative;
    float: left;
    margin: 0 10px;
    padding: 0;
    overflow: hidden;
}    
.caption {
    position: absolute;
    width: 100%;
    background: #000;
    color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    display: none;
}    
.caption div {
    padding: 10px;
}    
img {
    display:block;
}

HTML Code

<div class="box">
    <img src="img.jpg" width="400" />
    <div class="caption">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
</div>

The JavaScript part is a little bit more interesting. In the second line create a new object. For this object I created two methods.

JavaScript Code

var caption = {
    getCaptionHeight: function(e)
    {
        var imageHeight = e.find('img').height()
        var captionHeight = e.find('.caption').height();
 
        if (captionHeight > imageHeight)
            captionHeight = imageHeight;
 
        return captionHeight;
    },
    register: function(clas)
    {
        $(clas).hover(function() {
            var captionHeight = caption.getCaptionHeight($(this));
            var realCaptionHeight = $(this).find('.caption').height()
            $(this).find('.caption').css('bottom', '-' + realCaptionHeight + 'px');
 
            $(this).find('.caption').show().animate(
                {
                    bottom: '+=' + captionHeight
                }, 
                300
            );
        }, function() {
            var captionHeight = caption.getCaptionHeight($(this));
 
            $(this).find('.caption').animate(
                {
                    bottom: '-=' + captionHeight
                }, 
                300
            );
        });
    }
}
 
caption.register('.box');

Method getCaptionHeight will be responsible for retrieving the height of the caption. In this method I compared the height of the caption with the height of the image and in the case that the caption is higher, I reduced its height to equal the height of the image. This will prevent long captions going out of the boundaries of the image. I will later use this information for the animation.

The second method registers a hover event for all elements matching the CSS selector provided as the argument. In the hover event of the first argument I created a closure, which retrieves the height of the caption using the previously mentioned method and positions it below the image using the real caption height. After that the animation fires up and the caption is shown. As the second argument for hover event I created another closure. Here I do the same thing as in the first closure but in the reverse order. The animations fires up again but this time the caption will be hidden.

In the last line I just register all HTML elements where this event should be registered (or bound to), in my case, the div container with the CSS class box. You can specify more elements if you want, as long as you follow the selectors specification of jQuery. I understand that this method is not perfect, therefore I'm waiting for your comments.