Hay una forma de hacerlo, mucho más simple y eficiente, y es usando las bondades del css

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .gallery {
      width: 100%;
    }
    .imgContainer {
      display: inline-block;
      background-color: black;
      height: 200px;
      width: 25%;
      overflow: hidden;
    }

    .hoverEffect {
      height: 100%;
      width: 100%;
      opacity: 0.6;
      transition: all 500ms;
    }
    .hoverEffect:hover {
      opacity: 1;
      transform: scale(1.1);
    }

<!-- language: lang-html -->

    <div class="gallery">
      <div class="imgContainer">
        <img class="hoverEffect" src="https://i.sstatic.net/UmOcd.png">
      </div>
      <div class="imgContainer">
        <img class="hoverEffect" src="https://i.sstatic.net/PF6aN.jpg">
      </div>
      <div class="imgContainer">
        <img class="hoverEffect" src="https://i.sstatic.net/x4kFg.jpg">
      </div>
      <div class="imgContainer">
        <img class="hoverEffect" src="https://i.sstatic.net/DDWHD.jpg">
      </div>
      <div class="imgContainer">
        <img class="hoverEffect" src="https://i.sstatic.net/wl4Fq.jpg">
      </div>
    </div>

<!-- end snippet -->