Question

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 sure this is probably just a css/jq animation fix but I can’t figure it out.

Answer 1

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