CSS: Preventing a property from affecting an element until the end of the transition

Question

We have several fields for displaying some data about the hang. Therefore, when we move the mouse over one element, it should expand, move to other elements and show hidden data.

I did something like this:

box:hover { z-index: 50; } 

But there is one problem; When we move the mouse to another external white space, the z-index returns to the value, like the others. Thus, it is seen that the hovering element is in the lower layer than the next.

How to prohibit the property to apply until the end of the transition?

Here is my jsFiddle . Try moving the cursor over one element, move the mouse out of the element, and the background image of the other elements will be in front of our hanging element until the transition is completed.

Update: This is a screen shot of the problem. This is when we open the item. background-image other elements in front of our hovering element.

Answer 1

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

Thus, the z-index will change istantly to hover, while with 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 the transition attribute to your .box group.

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

Fixed fiddle