jQuery Image Description Slider

by nickadeemus2002

HTML

<div class="box"> 
    <div class="box_title">
        <h2>Image Box Title</h2>
        <!-- 
             we only want to show image description 
             when someone hovers over the image title area.
        -->
        <div class="box_description">
            <p>small image description snippet goes here....</p>
        </div>
    </div> 
</div>

CSS

.box{ 
    position: relative; 
    width: 210px; 
    height: 200px; 
    overflow: hidden; 
    background: #585858; } 
.box_title{ 
    position: absolute; 
    bottom: 0px; 
    background:#ff0000;
    color:#fff;
} 
.box_description {
    /*hide description on initial load*/
    height: 0; 
    font-size:0.7em;
    background:#000;
    color:#fff;
}
h2{font-size:1.3em;}
p{line-height:0.9em;width:210px;}

JavaScript

$('div.box_title').hover(function() {
        //hover-in handler
        $('div.box_description').animate({
            height: 15
        });
    }, function() {
        //hover-out handler
        $('div.box_description').animate({
            height: 0
        });
});