How to change image opacity on mouseover using jQuery

Images are undoubtedly the most attractive element of the page. And images with some cool effects make them more powerful and attractive. One of the effect on the image, is to make it transparent and play with transparency with mouse gestures. So in this post, I will show you how to change image opacity on mouseover and reset it on mouseout using jQuery.


First when image gets load on the page, set its opacity to 0.5 so that it looks transparent on load.
//Code Starts
$("#imgDemo").css("opacity", 0.5);
//Code Ends
Now using "hover" event, just change the opacity of image to 1.0 on mouseover and 0.5 on mouseout. Read more about "hover" here.

You can set the opacity property directly, but I have use animate method. The jQuery animate method allows create animation effects on any numeric CSS property. It also takes duration (in millisecond) as parameter. Thus the below jQuery code will apply opacity property in 5 milliseconds.
//Code Starts
$("#imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
//Code Ends
So, the complete code looks like,
//Code Starts
$(document).ready(function() {
    $("#imgDemo").css("opacity", 0.5);
    $("#imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});​
//Code Ends
See result below.


See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..