title: Enlarging two objects at the same time in one animation action ising jQuery
body: <p>Please look at the following test page :
  <a href="http://www.sitestepper.com/en/enlarge-image-with-jquery.htm" rel="nofollow noreferrer">sample page showing two images</a>.</p>
  
  <p>You see <strong>small images which get a bit enlarged when you move over the image</strong>.</p>
  
  <p>I have used <strong>jQuery</strong> to do this, but ran into the following problem.</p>
  
  <p>The only way I got the wanted effect was to enlarge the white <code>&lt;div&gt;</code> and making the image a percentage of the encapsulation <code>&lt;div&gt;</code>. If the <code>&lt;div&gt;</code> gets enlarged, the image automatically gets enlarged too.</p>
  
  <p>Howerver, as you see on the sample page, the percentage a have choosen, enlarges to image so, that a 1 pixel out of alignment is visible (<em>the right border is 1 pixel larger than the other pixels</em>).</p>
  
  <p>I could, of course, choose another percentage, but in stead want to ask the following question (being a programmer, I want to know how to solve similar problems, not this one in particular).</p>
  
  <p>I would like to be able to <strong>AND enlarge the <code>&lt;div&gt;</code> AND enlarge the <code>&lt;IMG&gt;</code></strong> during the <strong>same hover action</strong> - that way I could make sure that the enlarged image is the correct size.</p>
  
  <p>I tried a couple of things, but never got the result - can anybody help me here ? Any help would be highly appreciated. I am learning to use jQuery and need to see some ways how to do things before I really can start using it.</p>
  
  <p>The code of the page is below : (snippet from an existing page where I now want to include the enlarging effect - colours are just to see the different -areas).</p>
  
  <pre><code>  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;title&gt;enlarge image with jquery&lt;/title&gt;
    &lt;script type="text/javascript" src="http://www.sitestepper.com/versie2009/_js/jquery-1.4.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    html,body { margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; }
    *         { margin:0; padding:0; }
  
    img { border:none }
  
    .grid7x12jq {
       width:990px;
       height:260px;
       margin:10px 0 10px 10px;
       padding:9px 0px;
       clear:both;
       background-color:#ffddff;
    }
    .grid7x12jq .griditem {
       position:relative;
       width:137px;
       height:267px;
       float:left;
       border:none;
       padding:0px;
       margin-right:2px;
       margin-bottom:16px;
       background-color:#caffff;
    }
    .grid7x12jq .imgbox {
       position:absolute;
       left:0px;
       top:0px;
       border:none;
       width:137px;
       height:129px;
       margin:0;
       padding:0;
       clear:both;
    }
    .grid7x12jq .artbox {
       position:absolute;
       left:0px;
       top:138px;
       text-align:center;
       font-size:11px;
       border:none;
       padding:0px;
       width:137px;
       height:48px;
       line-height:14px;
       margin:0px;
    }
  
    .band-foto {
       position:absolute;
       left:10px;
       top:10px;
       width:118px;
       height:118px;
       background-color:white;
       border:1px solid black;
    }
    .band-foto img {
       width:88%;
       height:88%;
       padding:7px;
       /*position:absolute;*/
    }
  
    &lt;/style&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;jQuery Test - Enlarge images&lt;/h1&gt;
    &lt;script type='text/javascript' src='http://www.sitestepper.com/versie2009/_js/jquery-1.4.1.min.js'&gt;&lt;/script&gt;
  
    &lt;div class='grid7x12jq'&gt;
  
       &lt;div class='griditem'&gt;
          &lt;div class='imgbox'&gt;
             &lt;div class='band-foto'&gt;
                &lt;a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&amp;amp;titel=Estate collier with brilliant and emeralds'&gt;&lt;img
                   src='http://www.adinimages.com/low/07032-0181.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/&gt;&lt;/a&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='artbox'&gt;
             &lt;div style='height:30px;'&gt;
                estate collier with bri...
             &lt;/div&gt;
             3 photos ca.1970&lt;br/&gt;
               &lt;a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-0181&amp;amp;titel=Estate collier with brilliant and emeralds'&gt;view product&lt;/a&gt;&lt;br/&gt;
               online price:&lt;br/&gt;&amp;euro; 99999&lt;br/&gt;&lt;br/&gt;
               &lt;form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-0181' method='post'&gt;
                  &lt;input type='submit' value='Add to basket'/&gt;
               &lt;/form&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class='griditem'&gt;
          &lt;div class='imgbox'&gt;
             &lt;div class='band-foto'&gt;
                &lt;a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&amp;amp;titel=Estate collier with brilliant and emeralds'&gt;&lt;img
                   src='http://www.adinimages.com/low/07032-4420.P00.JPG' height='100%' width='100%' alt='Estate collier with brilliant and emeralds'/&gt;&lt;/a&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='artbox'&gt;
             &lt;div style='height:30px;'&gt;
                estate collier with bri...
             &lt;/div&gt;
             3 photos ca.1970&lt;br/&gt;
               &lt;a href='http://www.adin.be/en/2ndpage.asp?dtn=07032-4420&amp;amp;titel=Estate collier with brilliant and emeralds'&gt;view product&lt;/a&gt;&lt;br/&gt;
               online price:&lt;br/&gt;&amp;euro; 99999&lt;br/&gt;&lt;br/&gt;
               &lt;form class='addbasketbutton' action='http://www.adin.be/en/action_-_sh_put_in_basket_(01).asp?BskDT=07032-4420' method='post'&gt;
                  &lt;input type='submit' value='Add to basket'/&gt;
               &lt;/form&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class='clear'&gt;&lt;/div&gt;
  
    &lt;script type="text/javascript"&gt;
    $(document).ready(
     function()
     {
       $('.band-foto').hover(
         function()
         {
          $(this)
              .animate({ left:'5px', top:'5px', width:'130px', height:'130px'}, 'fast');
         } ,
         function(){
          $(this)
              .animate({ left:'10px', top:'10px', width:'118px', height:'118px'}, 'fast');
         }
       );
     }
    );
    &lt;/script&gt;
  
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>