This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image.
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>
.imgOpa
{
height:250px;
width:250px;
opacity:0.3;
filter:alpha(opacity=30);
}
In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100.
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);
})
});
0 comments
Post a Comment