using maphilight, imagemap areas should cover absolutely positioned images

Question

For a to-be-developed page I am trying to combine jQuery/jQueryUI functions and plugins ("draggable" and "maphighlight") with image maps and CSS-animated scaling triggered by adding and removing a class via jQuery on click:

It's too much to put in a snippet, so I created a codepen:

http://codepen.io/anon/pen/xqxgrz

I have a draggable area (#container5) inside another container (#container3) which hides any overflow (drag it to see the effect).

Inside #container3 there is one more container (#container4) which contains four images. Those are positioned absolutely, the three smaller ones are on top of one that fills the whole container when loaded. All this nesting of containers is necessary to get the ability for dragging, using an imagemap and scaling.

Now the essential thing: All images are more or less covered by map areas. Those become visible when you hover around (not over) the small images. When clicking the area around the image labeled "SHRINK", all elements downwards from #container4 (i.e. the container itself, 4 images and the map areas) will be scaled down to 60% of their initial size, caused by a CSS class being added by jQuery in combination with CSS animation. When clicking the area around "RESET", everything is reset to original size (but not to original position if it has been dragged before).

My problem is that I can't get the map areas to cover the small images when hovered. I tried this CSS (and other variations of that), but it has no effect, no matter which z-index I use:

#container4 area {
  position: absolute;
  z-index:10000;
}

But the map areas remain behind the (small) images - clicking the image itself has no effect although it's supposed to be covered by the clickable image map.

My intention later on is to have real images and polygonal map areas that are smaller than the images and only cover parts of those images (the shape of the things they display), so assigning the jQuery addClass function to the images themselves is not an option.

What can i do to get those areas on top of the images when hovered?

Answer 1

So, answering my own question after googling for days and trying everything I could think of:

The only way I could make it work was to put each image in its own div container and create a seperate image map for each image. That requires a lot more code, but it works.