title: How to stop images moving around on hover?
body: <p>Hi i have made a list of images with transitions upon hover, but as i hover over one the other move all over the place. I though giving them absolute positioning would work but it didnt, so how do i get it so the images dont go all over the place. Thanks.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;
              &lt;img class="pic" src="Chrysanthemum.jpg"/&gt;
              &lt;img src="Desert.jpg"/&gt;
              &lt;img src="Hydrangeas.jpg"/&gt;
              &lt;img src="Jellyfish.jpg"/&gt;
              &lt;img src="Koala.jpg" /&gt;
              &lt;img src="Lighthouse.jpg"/&gt;
              &lt;img src="Penguins.jpg"/&gt;
              &lt;img src="Tulips.jpg"/&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {       
      margin:0px;
      padding:0px;
  }
  
  .container {
      background-color:#c1c1c1;
      height:400px;
      text-align:center;
  }
  
  div img {
      height:100px;
      position:relative;
      width:150px;
      top:50%;
      margin-top:-50px;
      transform:skew(30deg);
      transform:rotate(30deg);
      opacity:0.7;
      transition:all 1s ease;
  }
  
  img:hover {
      height:400px;
      width:600px;
      transform:skew(0deg);
      transform:rotate(0deg);
      opacity:1;
      overflow:hidden;
  }
  </code></pre>
  
  <p>Fiddle Here,
  <a href="http://jsfiddle.net/#&amp;togetherjs=iM1y1m1vNv" rel="nofollow">http://jsfiddle.net/#&amp;togetherjs=iM1y1m1vNv</a></p>