Expand and overlap image over a grid of other images

Question

I've been fighting with jQuery all night and getting quite frustrated here, so forgive me if the answer was staring me in the face.

I have a 5x3 grid of 15 images contained within a <div>, and when I click on one of them, I want it to expand to three times its original size of 150x105 and overlap the rest. I've got the expanding down, but the overlapping isn't quite working.

My current HTML:

    <div id="image-grid">
        <img src="images/after-pictures/1.jpg" class="igc1" />
        <img src="images/after-pictures/2.jpg" class="igc2" />
        <img src="images/after-pictures/3.jpg" class="igc3" />
        <img src="images/after-pictures/4.jpg" class="igc4" />
        <img src="images/after-pictures/5.jpg" class="igc5" />
        <img src="images/after-pictures/6.jpg" class="igc1" />
        <img src="images/after-pictures/7.jpg" class="igc2" />
        <img src="images/after-pictures/8.jpg" class="igc3" />
        <img src="images/after-pictures/9.jpg" class="igc4" />
        <img src="images/after-pictures/10.jpg" class="igc5" />
        <img src="images/after-pictures/11.jpg" class="igc1" />
        <img src="images/after-pictures/12.jpg" class="igc2" />
        <img src="images/after-pictures/13.jpg" class="igc3" />
        <img src="images/after-pictures/14.jpg" class="igc4" />
        <img src="images/after-pictures/15.jpg" class="igc5" />
    </div>

The igc* class denotes the column the image is in.

CSS:

#image-grid {
    border: 1px solid #aaa;
    width: 745px;
    padding: 5px 2px 2px 5px;
}

#image-grid img {
    width: 150px;
    height: 105px;
    margin: -2px;
}

jQuery:

$('#image-grid img').click(function() {
    $(this).animate({
        width: '450px',
        height: '315px',
        zIndex: '10'
    }, 200);
});

Answer 1

It could be that you're trying to apply a z-index to elements which have not been given the position absolute property also?

Answer 2

somewhat like this...

$('#image-grid img').click(function () {
    $(this).animate({
        width: '450px',
        height: '315px'
    }, 200)
    .css({
        'z-index': function (i, z) {
            return z + 10;
        }, position: 'absolute',
        left: 0,
        top: 0
    })
    .siblings().css({
        'z-index': function (i, z) {
            return z - 10;
        }, position: 'static',
        width: '150px',
        height: '105px',
        left: 'auto',
        top: 'auto'
    });
});​

let me know what's the effect..