title: CSS transition and z-index conflict
body: <p>For a new webdesign I'm trying to control two 50% width layers with CSS transitions and z-index, but there seems te be a conflict: the z-index seems to be too slow. As you can see in the fiddle, the white box is hidden behind the right slider div on hover, until the transition is complete. Is there an alternative that works faster? Or is there another way to do it? Any help would be much appreciated!</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>body {
      background:black;
  }
  div {
      -webkit-transition:opacity 0.6s ease, width 0.6s ease;
      transition:opacity 0.6s ease, width 0.6s ease;
  }
  .slide {
      position:absolute;
      top:0;
      bottom:0;
      width:50%;
      -webkit-transform:skew(-15deg);
      -moz-transform:skew(-15deg);
      -ms-transform:skew(-15deg);
      -o-transform:skew(-15deg);
      transform:skew(-15deg);
      z-index:2;
  }
  .slide:hover {
      width:60%;
      z-index:3;
  }
  .slide#left {
      left:0;
  }
  .slide#right {
      right:0;
  }
  .wrap {
      width:100%;
      height:100%;
      position:absolute;
      overflow:hidden;
  }
  .inner {
      width:100%;
      height:100%;
      -webkit-transform:skew(15deg) scale(1.5);
      transform:skew(15deg) scale(1.5);
      opacity:0.5;
      position:absolute;
  }
  .inner:hover {
      opacity:1;
  }
  .inner#left {
      background:url(//savado.nl/new/key.jpg) no-repeat center center;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -ms-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
  }
  .inner#right {
      background:url(//savado.nl/new/code2.jpg) no-repeat center center;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -ms-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
  }
  .slide .logo {
      position:absolute;
      z-index:99;
      top:50%;
      height:20%;
      padding-left:20%;
      background:white;
  }
  .logo#left {
      right:0;
      -webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
      -moz-transform:translateX(50%) translateY(-50%) skew(15deg);
      -ms-transform:translateX(50%) translateY(-50%) skew(15deg);
      -o-transform:translateX(50%) translateY(-50%) skew(15deg);
      transform:translateX(50%) translateY(-50%) skew(15deg);
  }
  .logo#right {
      left:0;
      -webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
      -moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
      -ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
      -o-transform:translateX(-50%) translateY(-50%) skew(15deg);
      transform:translateX(-50%) translateY(-50%) skew(15deg);
  }
  </code></pre>
  
  <p>And here's the <a href="http://jsfiddle.net/8dRe4/1/" rel="noreferrer">fiddle</a>!</p>
  
  <p>PS: I'm new to posting questions of my own on this forum, so I'm sorry if I disobey any of the rules. Besides that, my English is not the best, since it's not my native language (I'm Dutch). But please help me out!</p>