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="#"><img src="thumb-1.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-2.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-3.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-4.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-5.jpg" alt="" /></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!