z-index的CSS3動畫問題

Question

我在this jsFiddle中有兩個元素。每個擴展在鼠標懸停與:hover過渡。

我想要藍色動畫匹配紅色。現在紅色的鼠標在藍色的鼠標懸停上展開，但是藍色的紅色在之間展開，紅色的爲。我希望每個動畫在之上。這可能可以通過更改:hover上的z索引來完成，但這似乎不起作用。