Why won't this image hover function bring the elements to the front?

I am trying to write some code to for a gallery of overlapping image elements. I want each image to have a hover event handler that brings that image to the front when the mouse enters the image, and then moves the image back when the mouse leaves the image. As it is now, the images flicker like they are being brought forward then put back straight away. Code available here. Any thoughts appreciated, I'm s开发者_StackOverflow中文版ure this is probably just a css/jq animation fix but I can't figure it out.

For z-index to work properly, you need to make sur that element is positioned relatively.

So, just add position: relative;

#jqfg_thumbnails img {
height: 150px;
width: 150px;
margin-left: -50px;
opacity: 0;
z-index: 1;
position: relative;
}