enlarging image on mouse hover without pushing other images using Jquery?

Question

I am trying create the image enlargement effect when you hover your mouse over an image thumbnail like the one that Google Images is using. However, I am encountering a problem where the enlarged image keeps pushing the other image to another location depending on the enlarged image's position.

Here's what I have so far:

<style>
img{float:left;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#I1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#I1").animate({height:96,width:128},"fast");
   });
});
</script> 

 <img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >

Answer 1

Have you tried giving it a higher z-index than the rest and an absolute position? You definitely need to give it an absolute position - this is how you remove it from the DOM stack and make it float there independently without making other elements depend on it.

Or, you can play around with clones like I did here:

.. removed old url ..

Updated with more "images", smoother animation, and removed the bugs from before that used to get an image stuck..

http://jsfiddle.net/Swader/jKTVn/7/