title: CSS3 animation issue with z-index
body: <p>I have two elements in <a href="http://jsfiddle.net/h6ztv/" rel="nofollow noreferrer">this jsFiddle</a>. Each expands on mouseover with a <code>:hover</code> transition.</p>
  
  <p>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 <em>under</em> the red one. I would like each to animate <em>over top of</em> the other. This could probably be done by changing the z-index on <code>:hover</code> but that didn't seem to work very well.</p>