Image Opacity on Mouse over in ASP.NET Using JQuery

Introduction

Creating attractive websites is desired by every web developers and this article will add one or more features to your existing web application.

Look at the sample screen that we will do in this article.

In the above screen you can see I've hovered my mouse on the second image.

Now follow the steps to create it.

Step 1:

Add the reference of jQuery file in head, for example:

<script type='text/javascript' src="Scripts/jquery-1.4.1.min.js"></script>

Step 2:

Now add jQuery method in the head section, for example:

<script type="text/javascript">
    $(function () {
        $('.myImage').each(function () {
            $(this).hover(
                    function () {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function () {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
                   })
        });
    });
</script> 

Step 3:

Now add the style for images.

<style type="text/css">
    .myImage
    {
        opacity:0.3;
        filter:alpha(opacity=30);
    }
</style>

Step 4:

Add the images on your web page, for example:

<p>
    <asp:Image ID="Image1" runat="server" class="myImage"
        ImageUrl="~/Images/abhi1.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image2" runat="server" class="myImage"
        ImageUrl="~/Images/abhi2.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image3" runat="server" class="myImage"
        ImageUrl="~/Images/abhi3.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image4" runat="server" class="myImage"
        ImageUrl="~/Images/abhi4.jpg" Height="220px" Width="195px"/>
</p>

Now all we set to run the project. Find the complete code here. I am using Master page in my code.

Complete Code

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<%--Adding jQuery for Image Opacity--%>
<script type='text/javascript' src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.myImage').each(function () {
            $(this).hover(
                    function () {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function () {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
                   })
        });
    });
</script>
<%--Adding Styles--%>
<style type="text/css">
    .myImage
    {
        opacity:0.3;
        filter:alpha(opacity=30);
    }
</style>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Learning ASP.NET and jQuery
    </h2>
<p>
    <asp:Image ID="Image1" runat="server" class="myImage"
        ImageUrl="~/Images/abhi1.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image2" runat="server" class="myImage"
        ImageUrl="~/Images/abhi2.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image3" runat="server" class="myImage"
        ImageUrl="~/Images/abhi3.jpg" Height="220px" Width="195px"/>
    <asp:Image ID="Image4" runat="server" class="myImage"
        ImageUrl="~/Images/abhi4.jpg" Height="220px" Width="195px"/>
</p>
</asp:Content>

So, that's all about the opacity on Mouse Hover in ASP.NET using jQuery. I recommend you download the attached file and run it. I hope you like it. Thanks.