Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

Our problem! Check the jsFiddle link above

like image 926
mrReiha Avatar asked Jun 08 '15 10:06

mrReiha


People also ask

Which CSS property is used for transition effect?

Definition and Usage. The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.

Which CSS property denotes a delay for the transition effect?

The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.

How do you stop a transition in CSS?

To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.

Which CSS property allows you to change property values smoothly over a given duration?

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.


2 Answers

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/

like image 113
Fabrizio Calderan Avatar answered Oct 11 '22 00:10

Fabrizio Calderan


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

like image 35
Amit Avatar answered Oct 11 '22 01:10

Amit