Question

I have a box which flips on click. There’s also an image inside that zooms on hover, shown in this fiddle.
The problem is the zoom transition on the image which is hidden is briefly displayed when I put the mouse out or back in.
My attempt to fix it:

#box.flip:hover img{
    -webkit-transform: none;
}

But this one resets the image before the flip transition is done which looks ugly.

Answer 1

Just add z-index:

#box.flip .amount{
    -webkit-transform: rotateX(0deg);
    z-index:999;
}

http://jsfiddle.net/aJY34/3/