Hi friends,in this article i will explain about How to
change image opacity and Zoom on mouseover using jQuery.
I already explained in the previous articles about How to add events in gridview using Jquery,Binding and Sorting Grid in ASP.NET MVC using Jquery and JQuery:Check Uncheck all CheckBoxes in ASP.Net CheckBoxList control
Write the below code in the ASP.NET
I already explained in the previous articles about How to add events in gridview using Jquery,Binding and Sorting Grid in ASP.NET MVC using Jquery and JQuery:Check Uncheck all CheckBoxes in ASP.Net CheckBoxList control
Write the below code in the ASP.NET
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to
change image opacity and Zoom on mouseover using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#imgSample").css("opacity", "0.5");
$("#img1").hover(function
() {
$(this).css("opacity",
"1.0");
$(this).animate({ width: "400px"
}, 'slow');
$(this).animate({ height: "300px"
}, 'slow');
},
function () {
$(this).css("opacity",
"0.5");
$(this).animate({ width: "200px"
}, 'slow');
$(this).animate({ height: "150px"
}, 'slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="imgSample"
src="images/NiceImage.jpg"
width="200px"
height="150px"
alt="img"
/>
<img id="img1" src="images/NiceImage.jpg"
width="200px"
height="150px"
alt="img"
/>
</div>
</form>
</body>
</html>
|
The output of the above page as shown in the below figure.The Opacity 0.5 shows like below.
When you mouseover second image then the opacity will be 1.0 and image will be zoom as shown in the below figure.
You can download the code by clicking on the below Download button.
No comments:
Post a Comment