Image Fade on Hover Effect with jQuery

I am using the Pinterest style grid layout for Podcast Gallery and Zero Dollar Movies. When you hover your mouse over any image thumbnail, it fades with a slow transition and goes back to its original state as soon you move the mouse out.

Internally, the fade-in on mouse-over effect is achieved by changing the opacity parameter of the image which the slow speed is achieve using CSS3 transitions. Here’s the code:


<img src="image.png" class="thumbnails" />

<style>
.thumbnails {
  -o-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
</style>

<script>
$('img.thumbnails').hover(
    function(){
      $(this).css('opacity', '0.7');
    },
    function(){
      $(this).css('opacity', '1');
    }
);
</script>