<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>