Почему этот переход CSS3 работает только с одной стороны?

Question

У меня есть этот код:

.wrapper { 
width: 100%; 
height: 300px; 
} 
.wrapper > div { 
width: 50%; 
height: 100%; 
position: absolute; 
z-index: 1; 
} 
.wrapper > div img { 
display: block; 
width: 600px; 
height: 600px; 
margin: 5% auto 0px auto; 
} 
.wrapper > div:hover { 
width: 100%; 
left: 0; 
z-index: 2; 
transition-property: all; 
transition-duration: .5s; 
transition-timing-function: ease; 
} 
.left { 
background: #000000; 
left: 0; 
} 
.right { 
background: #ffffff; 
right: 0; 

При наведении указателя мыши на левой стороне он делает то, что он, как предполагается, но при наведении курсора на правой стороне он сходит с ума и не работает, какие-либо идеи, почему?

Edit: я связала неправильный JSFiddle, здесь является правильным: http://jsfiddle.net/TjJrs/

Answer 1

Удалить left: 0; в:

.wrapper > div:hover { 

    width: 100%; 
    /*left: 0;*/ 
    z-index: 2; 
    transition-property: all; 
    transition-duration: .5s; 
    transition-timing-function: ease; 
} 

См DEMO