Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

jQuery- Image Opacity on mouse hover

Article:
Viewed:  1206 
Posted On:  2/1/2015 3:35:34 AM 
How we can change Image opacity on mouse hover in asp.net using jQuery? 

In this article I am going to show how we can change Image opacity on mouse hover in ASP.NET using jQuery.

Here in this application I am showing images in Data List from a directory.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQuery_ImageOpacity.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Change Image Opacity on Mouse Hover</title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <style type="text/css">
        .imgOpa {
            height: 150px;
            width: 250px;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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">
 
        <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"
            style="background: White;">
            <tr>
                <td style="height: 80px; background-color: skyblue; padding-left: 10px;">
                    <span style="font-size: 20pt; font-weight: bold; color: blue;">jQuery Image Hover</span>
                </td>
            </tr>
 
            <tr>
                <td>
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="4">
                        <ItemTemplate>
                            <table border="1">
                                <tr>
                                    <td>
                                        <img alt="" src='<%#Eval("Value") %>' class="imgOpa" /></td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:DataList>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now my aspx.cs code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace jQuery_ImageOpacity
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

               
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
                List<ListItem> files = new List<ListItem>();
                foreach (string filePath in filePaths)
                {
                    files.Add(new ListItem(Path.GetFileName(filePath), filePath));
                }
                dListImages.DataSource = files;
                dListImages.DataBind();
            }
        }
    }
}


Now run the application:

1.png

Image 1.

Put your mouse on any image.

2.png

Image 2.

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us