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 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);
});