Как мне остановить параллельные imgs от отодвигания при использовании CSS3 для преобразования?

Question

У меня сейчас проблема с тремя отдельными изображениями, и я использую CSS3 для их преобразования при наведении.

Я пытался поместить их в div, таблицу и просто получить простые изображения.Попытка плавать их всех в одном направлении или иметь # 1 слева # 3 справа # 2 нет.Попытка использовать z-index для наложения также безуспешно.

Любая помощь будет принята с благодарностью.

CSS:

#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);
}

HTML:

<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>

Answer 1

Создайте клон изображения, поместите его абсолютно поверх оригинала и примените преобразование к копии.