A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect.

<ul class="thumbnails">
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
</ul>

Take the above example, a simple list of images. Let's apply the basic styling for it...

ul.thumbnails { list-style: none; margin: 0; padding: 0; }
ul.thumbnails li { float: left; margin: 10px; width: 50px; height: 50px; }
ul.thumbnails li img { filter: alpha(opacity=60); /* IE only */ opacity: .60; /* All other browsers */ }

As you can see all of the thumbnails will have a default opacity of 60%. Now comes the jQuery script to add the fade effect...

$(document).ready(function(){
	$('ul.thumbnails li').hover(function(){
		$('img', this).stop().animate({opacity: 1});
	}, function() {
		$('img', this).stop().animate({opacity: 0.6});
	});
});

And that's all there is to it!