title: Why does my transform: scale() property move the image to the left?
body: <p>I'm trying to make an image gallery that uses CSS animations, but I'm having some weird effects come up. I have a smaller thumbnail image to start, and I want it to scale to twice the size when I hover over it. That part works, but it also makes it move to the left, and it ends up going over the edge of the screen. What should I do to fix it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.zoom {
      transition:1s ease-in-out;
  }
  .zoom:hover {
      transform:scale(2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
      &lt;div class="zoom"&gt;
          &lt;img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px"&gt;
          &lt;br&gt; &lt;span class="caption"&gt;A paper plane&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/isherwood/3b7afm7z/" rel="noreferrer"><strong>JSFIddle Demo</strong></a></p>