CSS: Preventing a property to affect on element until the end of transition

Question

We've some boxes to show some data on hover. So, when we move mouse over one element, it should expand, get in front of other elements, and show the hidden data.

I did something like this:

box:hover {
    z-index: 50;
}

But there's one problem; When we move mouse on another outer white space, the z-index back to the value, same as others. So it's visible that hovered element is in lower layer than next one.

How to prevent a property to apply, until the end of transition?

Here's my jsFiddle. Try to hover on one element, move your mouse out of element and the background-image of other elements will be in front of our hovered element before the transition ends.

Update: this is the screen shot of problem. This is when we unhover on element. background-image of another elements come in front of our hovered element.

Answer 1

Add a transition also for z-index, but insert a delay only when .box is in normal state.

Doing so the z-index will change istantly on hover, while on the opposite action (“unhover”) the z-index will take its initial value but only after 0.5 seconds (the duration of your expanding effect is 0.4 seconds)

.box {
   ...
   z-index: 1;
   -webkit-transition: z-index 0s .5s;   
      -moz-transition: z-index 0s .5s;   
           transition: z-index 0s .5s;   
}

.box:hover {
    -webkit-transition: z-index 0s 0s;
       -moz-transition: z-index 0s 0s;   
            transition: z-index 0s 0s; 
    z-index: 50;
}

example: http://jsfiddle.net/yjg2oach/

Answer 2

Add a transition attribute to your .box group.

.box {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    margin-bottom: 35px;
        transition: .4s;
}

Fixed fiddle