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>