Hover image problem

Hover image problem

Hello I'm using the Jquery below to enlarge some images on a site.  The problem is when I prep the images at 400 pixels the page site opens up with all the images at 400.  Once the end user goes over everything looks as it should.  When I prep the images at 150 pixels the end result is disappointing as the enlargement is so pixalted that it is hardly legible.  Ideally I would like the page to load at 150 pixels and hover over at 400 pixels.  

I've tried unsuccessfully to load the Jquery on page open, but have not had success with this.  Below is the jquery, CSS (for this section - not the layout) and HTML.  Any help is appreciated

  2.  $(document).ready(function() {
  3.         var cont_left = $("#container").position().left;
  4.         $("a img").hover(function() {
  5.             // hover in
  6.             $(this).parent().parent().css("z-index", 1);
  7.             $(this).animate({
  8.                height: "400",
  9.                width: "400",
  10.                left: "-=20",
  11.                top: "-=20"
  12.             }, "fast");
  13.         }, function() {
  14.             // hover out
  15.             $(this).parent().parent().css("z-index", 0);
  16.             $(this).animate({
  17.                 height: "150",
  18.                 width: "150",
  19.                 left: "+=20",
  20.                top: "+=20"
  21.             }, "fast");
  22.         });

  24.  $(".img").each(function(index) {
  25.             var left = (index * 20) + cont_left;
  26.             $(this).css("left", left + "px");
  27.         });
  28.     });

  2. <div id="mast"></div>

  4. <div id="container">
  5.         <div class="img"><a href="#"><img src="op/area.jpg"/></a></div>
  6.         <div class="img"><a href="#"><img src="op/areamarked.jpg"/></a></div>
  7.         <div class="img"><a href="#"><img src="op/areabyowner.jpg"/></a></div>
  8.         <div class="img end"><a href="#"><img src="op/areapark.jpg"/></a></div>
  9.         <div class="clear"></div>
  10.     </div>

  12. <div id="insidewrap">


  3.      #container {
  4.            
  5.             position: relative;
  6.             margin-top: 5px;
  7.             width: 850px;
  8. height:160px;
  9. overflow:inherit;
  12.         }
  13.         .img {
  14.             position: relative;
  15.             z-index: 0;
  16. float:left;
  17.         }
  18.         .end {
  19.             margin-right: 0;
  20.         }
  21.         .clear {
  22.             clear: both;
  23.         }
  24.         .img a img {
  25.             position: relative;
  26.             border: 0 solid #fff;
  27.         }