Monday, 2 June 2014

How to change image opacity and Zoom on mouseover using jQuery

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
<html xmlns="">
<head runat="server">
    <title>How to change image opacity and Zoom on mouseover using jQuery</title>
    <script type="text/javascript" src=""></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');

    <form id="form1" runat="server">
        <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" />

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

© 2012-2018 All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.