Эффект при наведении на картинку через css и jQuery

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