Image Zoom In and Zoom Out concept - Mostlikers

24 June, 2013

Image Zoom In and Zoom Out concept

This post make on mouse hover image zoom in and zoom out using j-query just call image id in j-query image with extender give animation effect slow access image on zoom in

zoom in

Live Demo          View code 

JQuery 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
 type="text/javascript"></script>


<script type="text/javascript">
   $(document).ready(function(){
       $('#mostlikers').width(200);
       $('#mostlikers').mouseover(function()
       {
          $(this).css("cursor","pointer");
          $(this).animate({width: "500px"}, 'slow');
       });
    
    $('#mostlikers').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });
  </script>

HTML 


<body>
<div>
<h1>Move mouse on image to Zoom In and Zoom Out</h1>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhgNZmmufhc_CGbvWHxBcxpWVqo1Bd4FJFibJih0Sl1dO1MtTw8WLYaavIxxdOX3XLJqIIBa4Gq7SEM-QdSNNMmOxIssjzZJFEmIqa5yOAMED9apwgyInVR9m9C37be54R3kZG5gF_BfH/s1600/logos.png" alt="smile" id="mostlikers"></img>
</div>
</body>

Live Demo


Move mouse on image to Zoom In and Zoom Out

smile
Labels:

2 comments:

Subscribe to: Post Comments (Atom)