Chat with us, powered by LiveChat

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

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

      $(this).css('opacity', '0.7');
      $(this).css('opacity', '1');