title: Hoover zoom effect with multiple images and keep image dimension
body: <p>I am trying to make a hover zoom effect with multiple images:</p>
  
  <ul>
  <li>images are centered on the page</li>
  <li>keep dimensions while zooming in</li>
  <li>image width is set inline at img tag</li>
  </ul>
  
  <p>Here is what I tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-zoom {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  }
  .img-zoom img {
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  margin: 0px 20px;
  }
  .img-zoom img:hover {
  -webkit-transform: scale(1.21);
  -ms-transform: scale(1.21);
  transform: scale(1.21);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="text-align: center;padding: 5px;"&gt;
      &lt;div class="img-zoom"&gt;
          &lt;img src="http://lorempixel.com/600/210" width="300" /&gt;
          &lt;img src="http://lorempixel.com/600/210" width="300"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>...but the images are extending on mouse hover.</p>