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:
Image 1.
Put your mouse on any image.
Image 2.
Image 3.
Image 4.
Image 5.