How to Create Image Fade 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>
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
