<ul class="gallery">  
<li>  
<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>  
<h2><a href="#">Имя изображения</a></h2>  
</li>  
</ul>

ul.gallery {  
width: 708px; /*--Регулируем ширину в соответствии со сценарием--*/  
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 закругленные углы--*/  
-khtml-border-radius: 3px; /*--CSS3 закругленные углы--*/  
-webkit-border-radius: 3px; /*--CSS3 закругленные углы--*/  
display: inline; /*--Настройка специально для IE6--*/  
}  
ul.gallery li a.thumb {  
width: 204px; /*--Ширина изображения--*/  
height: 182px; /*--Высота изображения--*/  
padding: 5px;  
border-bottom: 1px solid #ccc;  
cursor: pointer;  
}  
ul.gallery li span { /*--Выделяем изображение для применения эффекта--*/  
width: 204px;  
height: 182px;  
overflow: hidden;  
display: block;  
}  
ul.gallery li a.thumb:hover {  
background: #333; /*--Hover эффект для браузеров с отключенным js--*/  
}  
ul.gallery li h2 {  
font-size: 1em;  
font-weight: normal;  
text-transform: uppercase;  
margin: 0; padding: 10px;  
background: #f0f0f0;  
border-top: 1px solid #fff; /*--эффект легкого заострения--*/  
}  
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>  
jQuery  
$(document).ready(function() {  

$("ul.gallery li").hover(function() { //при наведении курсора...  

var thumbOver = $(this).find("img").attr("src"); //получает url изображения и  
приписывает к нему свойство 'thumbOver'  

//Прикрепляет фоновому изображению (помеченному thumbOver) тег <a> - И задает  
позицию заднего плана  
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat  
center bottom'});  

//анимирует изображение, при помощи значения прозрачности равное 0 (в итоге  
изображение исчезает)  
$(this).find("span").stop().fadeTo('normal', 0 , function() {  
$(this).hide() //прячет изображение  
});  
} , function() { //при отведении курсора...  
//возвращает цветное изображение  
$(this).find("span").stop().fadeTo('normal', 1).show();  
});  

});  
</script>