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

jQuery- Image Opacity on mouse hover

Viewed:  3049 
Posted On:  01/02/2015 03:35:34 
How we can change Image opacity on mouse hover in 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="">
<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);
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            $('.imgOpa').each(function () {
                    function () {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                   function () {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
    <form id="form1" runat="server">
        <table cellpadding="1" cellspacing="1" width="880px" align="center" class="BlueBorder"
            style="background: White;">
                <td style="height: 80px; background-color: skyblue; padding-left: 10px;">
                    <span style="font-size: 20pt; font-weight: bold; color: blue;">jQuery Image Hover</span>
                    <asp:DataList ID="dListImages" runat="server" RepeatColumns="4">
                            <table border="1">
                                        <img alt="" src='<%#Eval("Value") %>' class="imgOpa" /></td>

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;

Now run the application:


Image 1.

Put your mouse on any image.


Image 2.


Image 3.


Image 4.


Image 5.

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