CSS3 animation issue with z-index

Question

I have two elements in this jsFiddle. Each expands on mouseover with a :hover transition.

I want the blue animation to match the red one. Right now the red one expands over top of the blue one on mouseover, but the blue one expands under the red one. I would like each to animate over top of the other. This could probably be done by changing the z-index on :hover but that didn't seem to work very well.

Answer 1

Since you are animating all properties, the z-index animates and steps from 0 to 1 at the end of the animation.

Just animate the properties that you need and it works:

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    -webkit-transition: width .6s ease-in-out;
    -moz-transition: width .6s ease-in-out;
    -o-transition: width .6s ease-in-out;
    -ms-transition: width .6s ease-in-out;
    transition: width .6s ease-in-out;
}

http://jsfiddle.net/duopixel/hfM7E/

Answer 2

Try adding this to the CSS (and remove the z-index modifier in #a:hover, #b:hover {...}):

#a {
    background: #55a;
    left: 0;
    z-index: 1;
}

#b:hover {
    z-index: 2;   
}

Example: http://jsfiddle.net/h6ztv/3/

Answer 3

Try setting initial z-index value to '0'

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    z-index:0;
    }

#a:hover, #b:hover {
    width: 600px;
    z-index: 1;
}