Make elements of a list overlap visually

Question

I have a list (ul) of images, 3 in a row (looks like the Metro UI). I want to animate those images with jQuery, namely resize them on hover. The problem is that when the image resizes (zooms), the other elements move to make room for the zoomed element messing the whole design up.

What I want to do is to make the hovered element overlap the other images. I suspect that I can achieve this by manipulating its CSS position property, and I tries, but I can't seem to find or figure out the correct solution.

I'm using hoverIntent for invoking actions on hover.

The code used for enlarging images.

$(document).ready(function() {
$(".entry-img").hoverIntent(tall,short);
function tall(){
$(this).animate({"height":300},500);
// code for making the image overlap
}
function short(){
$(this).animate({"height":200},500);
// remove the "overlap property"
}
});

Answer 1

Try changing the functions to this:

function tall(){
   $(this).parent().css('position', 'absolute').css('z-index','10').animate({"height":300},500);
}
function short(){
   $(this).parent().css('position','relative').css('z-index','1').animate({"height":200},500);
}