How to zoom in and out using jquery?

Question

I have the following code

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

1. The tag includes GIF images. These images are transparent, and some of them are highlighted with a transparent yellow patch. 2. The css class is applied to the inner div class, and the background image of the jpeg type is assigned to the inner div class using the css class. 3. The outer div is made scrollable using the css class applied to it.

I want to make image zoom in and out inside a div using jquery.

can i zoom in or out with jquery? What is simple code for?

waiting for your friends friends!

Thank!

Answer 1

, <img> .

div, div overflow:hidden;, .

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

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

Answer 2

Kabbar : http://www.ideabonus.com/Kabbar/index.html

Answer 3

    ****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">

Answer 4

. .