jQuery div animate over surrounding elements

I am trying to show thumbnails that expand to show the full image when the container div is hovered.

The problem I am having is that when one of them animates it pushes the elements around it. I tried absolute positioning, but that made all elements move - I want them to stay in place, but the animated element to go over the elements around it. I also tried z-index, but it did not work either. The HTML, CSS, jQuery and a link is below for your reference.

HTML:

<div style="width:400px;height:400px;background:red;">
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div>
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div
</div>

CSS:

.imgThumb{
    float: left;
    margin: 5px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid black;
    z-index: 100;
}

Open and close jQuery:

$("div.imgThumb").mouseover(function () {
        var imgWidth = $(this).find("img").width();
        var imgHeight = $(this).find("img").height();
        $(this).animate({
            height: imgHeight,
            width: imgWidth,
            position: "absolute",
            zIndex: 999,
        });
    });
    $("div.imgThu开发者_Python百科mb").mouseout(function () {
        $(this).stop(true).animate({
            height: "150",
            width: "150",
            position: "relative"
        });
    });

Thank you!

Here's a possible solution that involved cloning the thunmbnail and animate the clone on top of the rest of the elements

http://jsbin.com/edenu3/edit

$(function() {
  $(".thumb").bind("mouseover", function() {
    var extraImg = $(this).clone();
    var of = $(this).offset();
    extraImg.css({position:'absolute', top: of.top, left: of.left, margin: 0})
      .appendTo("body")
      .animate({
        width:200,
        height:200
      });

    extraImg.bind("mouseout", function() {
      $(this).stop(true).remove();
    });
  });
});
​

If you can add another set of properties we can solve it.

.imgThumb {
    border: 1px solid black;
    float: left;
    height: 150px;
    margin: 5px;
    overflow: hidden;
    position: absolute;
    width: 150px;
    z-index: 100;
}

.imgThumb1 {
}

.imgThumb2 {
    left: 170px;
}

.imgThumb3 {
    top: 170px;
}

Add the classes imgThumb1, imgThumb2 and imgThumb3 to the imgThumb divs. then on animate change the z-index to 9999.

Working copy in jsfiddle