Zoom image onmousover using jquery

In  this article we will explore how to leverage animate feature of jquery to zoom an image on mouseover. Download jquery from http://jquery.com/




Lets see how we can do this.

Step 1: Dowload jquery from the above mentioned url and add it in the head section of the page.

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 2: Add below style in the head section of the page

<style type="text/css">
      .imgThNail
      {
            height: 150px;
            width: 150px;
      }
</style>

Step 3: Add below jquery in the page.

<script type="text/javascript">
      $(function() {
            $("img.imgThNail").mouseover(function(e) {
                  var newImg = '<img src=' + $(this).attr("src") + '></img>';
                  $('#sourceDiv')
                        .html($(newImg)
                        .animate({ height: $(this).width() + 40, width: ($(this).width() + 40) }, 10));
            var left = ($(this).position().left - 20) + "px";
            var top = ($(this).position().top - 20) + "px";
            $("#sourceDiv").css({
                  position: 'absolute',
                  zIndex: 2,
                  left: left,
                  top: top,
                  display: 'block'
            });
      });
      $("#sourceDiv").mouseout(function(e) {
            $("#sourceDiv").css({
                  display: 'none'
                  });
            });
      });
      document.onclick = check;
      function check(e) {
            $("#sourceDiv").css({
                  display: 'none'
            });
      }
</script>

Step 4: Add below images on the page

<div style="padding:40px">
      <asp:Image ID="imgA" class="imgThNail" runat="server" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" />
      <asp:Image ID="imgB" class="imgThNail" runat="server" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" />
      <asp:Image ID="imgC" class="imgThNail" runat="server" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" />
      <asp:Image ID="Image1" class="imgThNail" runat="server" ImageUrl="images/Suzuki-Swift.jpg" />
      <div id="sourceDiv" style="display: none; border: Solid 1px White;">
      </div></div>

Live Demo

This ends the article of zooming image on mouse over using jquery
Like us if you find this post useful. Thanks!

Shibashish mohanty

Download Code