Hay una forma de hacerlo, mucho masmás simple y eficiente, y es usando las bondades del css. Aqui te va un ejemplo, puedes copiarlo en un archivo .html y agregarle las imagenes a tu gusto para que veas como queda y si es la respuesta que andas buscando no olvides dar un voto a favor. Espero que te sirva.
<style>
.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);
}
</style>
<div class="gallery">
<div class="imgContainer">
<img class="hoverEffect" src="a.jpg">
</div>
<div class="imgContainer">
<img class="hoverEffect" src="b.jpg">
</div>
<div class="imgContainer">
<img class="hoverEffect" src="c.jpg">
</div>
<div class="imgContainer">
<img class="hoverEffect" src="d.jpg">
</div>
<div class="imgContainer">
<img class="hoverEffect" src="e.jpg">
</div>
</div>
.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);
}
<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>