在使用CSS3进行转换时，如何防止并行IMG被推到一边？

我目前有一个问题，我有三个独立的图像，我使用CSS3转换悬停时他们

我试着把它们放在div里，放在一张桌子上，只留下简单的图像。试图将它们全部朝一个方向浮动，或者“左1，右3，无2”。尝试使用z索引覆盖也没有运气

任何帮助都将不胜感激

CSS:

HTML:

最近的

复制图像，将其绝对放置在原始图像上，并将转换应用于副本。

问题到底出在哪里。我把这段代码放到了JSFIDLE中，转换看起来像预期的那样工作。不要在布局中使用表。使用一个样式化的无序列表。转换工作正常，但是如果你看JSFIDLE，转换右侧的图像决定要向东缩放。谢谢你的帮助！谢谢。

#contentrecent {
  float: right;
  width: 380px;
  height: 400px;
}

#contentrecent img {
  float: left; 
  width: 120px;
  height: 350px;
  background-image:url(images/snapshot1.jpg);
  overflow:hidden;
  position: relative;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
}

#contentrecent img:hover {
  z-index: 1;
  width:600px;
  height: 350px;
  position: relative;
  transform: translate(-400px,-100px);
  -webkit-transform: translate(-400px,-100px);
}

<div id="contentrecent">
  <h1> Recent </h1>
  <table>
    <tr>
      <td width="120" height="300" align="left"><img src="images/snapshot1.jpg" /></td>
      <td width="120" height="300" align="left"><img src="images/snapshot2.jpg" /></td>
      <td width="120" height="300" align="left"><img src="images/snapshot3.jpg" /></td>
    </tr>
  </table>                 
</div>