Change Image Opacity on MouseOver using jQuery

Posted by: Suprotim Agarwal , on 12/28/2009, in Category jQuery and ASP.NET
Views: 60052
Abstract: This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image.
Change Image Opacity on MouseOver using jQuery
 
This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.
Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can change the opacity of an image.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Change Image Opacity on Hover</title>
    <style type="text/css">
    .imgOpa
    {
        height:250px;
        width:250px;
        opacity:0.3;
        filter:alpha(opacity=30);
    }
    </style>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
   
    <script type="text/javascript">
        $(function() {
            $('.imgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
                   })
                });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Hover over an Image to change its Transparency level</h2>
        <br />
        <asp:Image ID="Image1" runat="server"
            ImageUrl="../images/1.jpg" class="imgOpa" />
        <asp:Image ID="Image2" runat="server"
            ImageUrl="../images/2.jpg" class="imgOpa" />
        <asp:Image ID="Image3" runat="server"
            ImageUrl="../images/3.jpg" class="imgOpa" />
        <asp:Image ID="Image4" runat="server"
            ImageUrl="../images/4.jpg" class="imgOpa" />
    </div>
    </form>
</body>
</html>
 
In this example, observe that the images have a class attribute ‘imgOpa’. The definition of the CSS class is as shown here:
    .imgOpa
    {
        height:250px;
        width:250px;
        opacity:0.3;
        filter:alpha(opacity=30);
    }
When the images are loaded, they are in a semitransparent state. In Firefox, Chrome and Safari, we use the opacity:n property for transparency. The opacity value can be from 0.0 - 1.0, where a lower value makes the element more transparent.
In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100.
This is how the images appear in a semitransparent when they are loaded:
NewPicture
When the user hovers the mouse over a semitransparent image, we use the jQuery hover() method to animate the opacity property from 0.3 to 1.0, thereby creating a cool effect on the images. The code to achieve this effect is shown below:
$(this).hover(
    function() {
        $(this).stop().animate({ opacity: 1.0 }, 800);
    },
   function() {
       $(this).stop().animate({ opacity: 0.3 }, 800);
   })
});
The screenshot shown below shows how the image will appear when the user hovers the mouse over an image; let us say the first image. The transparency of the image is changed from 0.3 to 1.0.
NewPicture_1
See a Live Demo
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
 
Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by dhir on Monday, September 5, 2011 11:07 PM
during creation of css file,it doesn't support "opacity" property name....it shows error" opacity is not css property name "  and same in case of "filter " property..
Comment posted by ravi on Wednesday, April 11, 2012 2:13 PM
thanks thanks thanks sir 5stars++++++++++
Comment posted by gsgsgsg on Thursday, October 4, 2012 5:52 AM
dfgs
Comment posted by s on Thursday, October 4, 2012 5:52 AM
a
Comment posted by edelweiss on Saturday, January 26, 2013 6:19 PM
nice article thanks for share..:)
visit me..
http://www.diedelweiss.com
Comment posted by Martin on Monday, April 15, 2013 4:44 AM
This is great. Any idea why the image slighly enlarges upon mouseover?
Comment posted by Ravikumar.s on Tuesday, May 14, 2013 11:59 PM
thanks .....super!!!!!!!!!
Comment posted by hhhh on Tuesday, August 20, 2013 5:19 AM
nice....thanks a lot...

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel