How to zoom in and zoom out image using jquery?

I have following code

<div class="c1">
    <div class="d1">
         <img />
         <img />
         <img />
    </div>
</div>

1.There are GIF images included in tag. These images are transparent and some portion of them are highlighted with transparent yellow patch. 2. css class is applied to inner div class and there is a background image of type jpeg is assigned to inner div class with the help of css class. 3. The outside div is made scrollable with the help of css class applied to it.

I want to do zoom in and out on the image image inside div w开发者_如何学Cith the help of jquery.

so is it possible to zoom in and out the image with the help of jquery? what is the simple code for it?

waiting for your replies friends!

Thank You!

Backgrounds cannot be scaled, only <img> tags can.

You could put an image in a div, where the div has overflow:hidden;, and then scale the image.

You can see an quick example here: http://jsbin.com/ozugi3/2

http://jsbin.com/ozugi3/2/edit

    ****here is the script****
       <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(document).ready(function () {
            $('#Img1, #Img2, #Img3').mouseover(function () {
                $(this).animate({ width: "122px", height: "110px" }, 100);
            });
            $('#Img1, #Img2, #Img3').mouseout(function () {
                $(this).animate({ width: "118px", height: "106px" }, 100);
            });
        });
      </script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">