Why does my transform: scale() property move the image to the left?

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?

.zoom {
  transition: 1s ease-in-out;
}

.zoom:hover {
  transform: scale(2);
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px">
    <br> <span class="caption">A paper plane</span>
  </div>
</div>

JSFIddle Demo

Solution

It's not moving to the left. The left edge is moving, however, as is the right. Because your content is left-aligned, it appears to move left. This colorized demo shows it well:

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

You could set the transform origin:

transform-origin: left top;

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
  transform-origin: left top;
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

Also consider simply using a less dramatic transform:

transform: scale(1.1);

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(1.1);
}

<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>