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