<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>    
    <script>    
    $(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});    
    }    
    );    

    });    
    </script>    
    <style>    
       
    .photo {    
    position:relative;    
    font-family:arial;    
    overflow:hidden;    
    border:5px solid #000;    
    width:350px;    
    height:233px;    
    }    
       
    .photo .heading, .photo .caption {    
    position:absolute;    
    background:#000;    
    height:50px;    
    width:350px;    
    opacity:0.6;    
    }    
       
    .photo .heading {    
    top:-50px;    
    }    

    .photo .caption {    
    bottom:-50px;    
    left:0px;    
    }    
       
    .photo .heading span {    
    color:#26c3e5;    
    top:-50px;    
    font-weight:bold;    
    display:block;    
    font-size:15px;    
    padding:5px 0 0 10px;    
    }    
       
    .photo .caption span{    
    color:#999;    
    font-size:11px;    
    display:block;    
    padding:5px 10px 0 10px;    
    }    
       
    </style>

<div class="photo">    
    <div class="heading"><span>Название картинки</span></div>    
    <img src="Ссылка на картинку">    
    <div class="caption"><span>Здесь любое ваше описание]</span></div>    
    </div>