title: CSS3 transition/hover effect not working in Firefox; a Firefox bug?
body: <p>I'm trying to create a mouse-over effect that slides the top layer to the left and reveal the bottom layer using CSS3. The code works in Chrome but not in Firefox...did I do something stupid again? Thanks for your help!</p>
  
  <p>Edit: I must have done something wrong, because even if I leave out the transition code, nothing happens when I hover over "layers" in Firefox...:(</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;div class="layers"&gt;
      &lt;div class="over"&gt;content&lt;/div&gt;
      &lt;div class="under"&gt;content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The style:</p>
  
  <pre><code>.layers {
    position: relative;   
    width: 200px;
    height: 50px;
    overflow: hidden;
  }   
  
  .over {
    width: 200px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }   
  .under {
    width: 200px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
  }           
  
  .layers:hover .over {
    left: -200px; 
  }
  </code></pre>