<script type="text/javascript" src="http://cs.ucozon.ru/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="http://images.websnapr.com/?size=S&key=3xxQRm9qwcU2&url=тут наверно Ссылка на сайт">   
   <div class="caption"><span>тут может место сайта в топе или краткое описание</span></div>   
   </div>