CODEWITHSUNDEEP
csscss-transitions
olanod
olanod

Reputation: 30576

Cancel image transform/transition when backface-visibility is hidden

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.

Upvotes: 1

Views: 179

Answers (1)

Jan
Jan

Reputation: 719

Just add z-index:

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

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

Upvotes: 1

Related Questions