Image Zoom - Transit Plugin

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>


<!-- This bottom table is all ZOOM -->
<table id="container-2" >

<tr>
   
    <td>
        <div class="megaZoom"><br /><br />
            <br /> ZOOM
        </div>
   </td>
    
    <td>
        <div class="megaZoom"><br /><br />
            <br />MEGA ZOOM
        </div>
   </td>
</tr>
</table>

CSS

td {
    position:relative;
}

table {
    border: 1px solid black;
    margin-top: 50px;
    margin-left: 50px;
    background-color: #CDF7CA;
}

div {
    background-image:url('http://avttesting.danaahglobal.com/AvtWeb/bg_tree1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #73D680;
    border: 1px solid black;
    text-align: center;
    color: blue;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 20px;
}

JavaScript

/*
     The .transit() jQuery plugin is loaded as a jsFiddle asset.
     For more info, check it out:  https://github.com/rstacruz/jquery.transit#readme
     
     More about jQuery .stop() here:
     http://css-tricks.com/examples/jQueryStop/
     
*/


// megaZoom is for the Center Object.
$(".megaZoom").hover(
    function () {
     $(this).stop(true,true).transition({ scale: 4 });
  },
    function () {
    $(this).stop(true,true).transition({ scale: 1.0 });
  }
);