image with webKit transform appeat under the next div

Question

I trying to resolve this issue shown in the image for clarification. I have a small thumbnail with webkit transform. when I hover, The size get bigger. Wehn I use accordion, part of the enlarged image appears under the accordion div. I tried z-index, but it did not work. I would greatly appreciate any idea on what tag attribute or jquery function that may help resolve.

thank you Mike

Answer 1

The z-index property only affects elements that have a position value other than static (the default). Try adding position: relative to the thumbnail element.

.smallImages {
    position: relative;
    z-index: 1;
}