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