CSS Image scaling properies?

On my website I have a column of pictures with a hover scaling effect. When hovering over the image it grows to 5 times the size of the original image. However, in order to get the hover effect to disengage I have to either move the mouse off the page or above the scaled up image.

For instance, if I have a portrait orientation photo when I hover over it and it scales to 5x size I can not get the image to go back to normal size without moving the mouse off the web browse or above the picture. Because of this effect I am unable to reduce the size of the image and thereby am unable to hover over the image above it without completely moving the mouse off screen.

How can I make an area of effect for the hover scaling so that if my mouse is no longer over the scaled image it will go back down to the original size?

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

div.grow:hover {
  transform: scale(3);
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
      <div class="grow">
        <img src="//via.placeholder.com/300x150">
      </div>
    </div>
  </div>
</section>

Solution

There you go:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 1rem;
  border: 0.1rem solid black;
  max-width: 200px;
  max-height: 200px;
}

.grow:hover {
  transform: scale(3);
}

<section id="images" class="image-gallery container">
  <div class="container-content">
    <h2>Image Gallery</h2>
    <div class="content">
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
      <div>
        <img src="https://i.imgur.com/KEweiIz.jpg" class="grow">
      </div>
    </div>
  </div>
</section>

Assigning the class="grow" attribute to the <img> tag would do. And in the CSS, just change div.grow to .grow.