<style type="text/css">  
  ul.gallery {  
  width: 708px;  
  list-style: none;  
  margin: 0 auto; padding: 0;  
  }  

  ul.gallery li {  
  float: left;  
  margin: 10px; padding: 0;  
  text-align: center;  
  border: 1px solid #ccc;  
  -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/  
  -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/  
  -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/  
  display: inline; /*--Gimp Fix aka IE6 Fix--*/  
  }  

  ul.gallery li a.thumb {  
  width: 204px;  
  height: 182px;  
  padding: 5px;  
  border-bottom: 1px solid #ccc;  
  cursor: pointer;  
  }  

  ul.gallery li span { /*--Used to crop image--*/  
  width: 204px;  
  height: 182px;  
  overflow: hidden;  
  display: block;  
  }  

  ul.gallery li a.thumb:hover {  
  background: #333;  
  }  

  ul.gallery li h2 {  
  font-size: 1em;  
  font-weight: normal;  
  text-transform: uppercase;  
  margin: 0; padding: 10px;  
  background: #f0f0f0;  
  border-top: 1px solid #fff; /*--Subtle bevel effect--*/  
  }  

  ul.gallery li a {text-decoration: none; color: #777; display: block;}  
  </style>  

  <script type="text/javascript">  
  $(document).ready(function() {  
  $("ul.gallery li").hover(function() { //On hover...  
  var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'  

  //Set a background image(thumbOver) on the <a> tag
  $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});  

  /Fade the image to 0
  $(this).find("span").stop().fadeTo('normal', 0 , function() {  
  $(this).hide() //Hide the image after fade  
  });

  } , function() { //on hover out...  
  //Fade the image to 1
  $(this).find("span").stop().fadeTo('normal', 1).show();  
  });  

  });  
  </script>

<ul class="gallery">  
  <li>  
  <a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>  
  <h2>Описание картинки</h2>  
  </li>  

  <li>  
  <a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>  
  <h2>Описание картинки</h2>  
  </li>  

  <li>  
  <a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>  
  <h2>Описание картинки</h2>  
  </li>  

  <li>  
  <a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>  
  <h2>Описание картинки</h2>  
  </li>  

  </ul>