<div class="photo">
                                             <div class="heading"><span>NOM</span></div>
                                          <img src="http://casimages.com/images/upload_ano.gif" />
                      <div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div>
               </div>

$(document).ready(function () {
 
    // transition effect
    style = 'easeOutQuart';
 
    // if the mouse hover the image
    $('.photo').hover(
        function() {
            //display heading and caption
            $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
            $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
        },
 
        function() {
            //hide heading and caption
            $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
            $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
        }
    );
 
});

.photo
{
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:300px;
height:186px;
}
.photo .heading, .photo .caption
{
/* position inside the container */
        position:absolute;
        background:#000;
        height:50px;
        width:300px;
       
        /* transparency for different browsers */
        /* i have shared this in my CSS tips post too */
        opacity:0.6;
        filter:alpha(opacity=60);
        -moz-opacity:0.6; 
        -khtml-opacity: 0.6;
 
    }
   
    .photo .heading {
       
        /* hide it with negative value */
        /* it's the height of heading class */
        top:-50px;
    }
 
    .photo .caption {     
        /* hide it with negative value */
        /* it's the height of bottom class */
        bottom:-50px;     
    }
   
 
    /* styling of the classes*/
    .photo .heading span {
 
        color:#26c3e5;
        top:-50px;
        font-weight:bold;
        display:block;
        padding:5px 0 0 10px;
    }
   
    .photo .caption span{
        color:#999;
        font-size:9px;
        display:block;
        padding:5px 10px 0 10px;
    }