<ul class="gallery">
  <li>
  <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
  <h2><a href="#">Image Name</a></h2>
  </li>
</ul>

<ul class="gallery">
<!-- პირველი -->
  <li>
  <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
  <h2><a href="#">Image Name</a></h2>
  </li>
<!-- მეორე -->
  <li>
  <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
  <h2><a href="#">Image Name</a></h2>
  </li>
</ul>

ul.gallery {
  width: 708px; /*--Adjust width according to your scenario--*/
  list-style: none;
  margin: 0; 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 - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
  width: 204px; /*--Width of image--*/
  height: 182px; /*--Height of image--*/
  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; /*--Hover effect for browser with js turned off--*/
}
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;}

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<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'});
  //Animate the image to 0 opacity (fade it out)
  $(this).find("span").stop().animate({opacity: 0}, 300);
  } , function() { //on hover out...
  //Animate the image back to 100% opacity (fade it back in)
  $(this).find("span").stop().animate({opacity: 1}, 300);
  });

});

</script>