Zoom On Hover Image Gallery Overlapping

I'm trying to create an image gallery for my eCommerce website.

I am trying to code in a zoom once you hover over the images and once clicked on mobile. I have achieved this to a degree but I cannot seem to stop the images overlapping from the top and bottom of each other.

here is an example https://w3bits.com/labs/css-image-hover-zoom/ I'm trying to get all the images in the columns to zoom and be as they are in the Basic example shown on the web page.

I've Tried Applying Over-Flow:Hidden in various combination in the style.

Could anyone help?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
}

.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
  overflow: hidden;
}


/* Create two equal columns that sits next to each other */
.column {
  height:100%;
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 0 4px;
  overflow: hidden;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  transition: transform .5s ease;
}


.column img:hover {
  transform: scale(1.5);
}


</style>
</head>
<body>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    <img src="" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
    <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:70%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>  


</div>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;


// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "50%";  // IE10
    elements[i].style.flex = "50%";
  }
}


</script>

</body>
</html>

Solution

Copied and pasted my comment as an answer:

overflow: hidden on a parent element prevents its children from going outside its borders. This means that you currently only prevent the images from overlapping their parent columns. Try putting each image into its own div, and applying overflow: hidden on the div :)

Here's the changed example below. I also replaced the img's margin-top with the .img-parent margin-top, as otherwise the image will also expand into the top gap.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
}

.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
  overflow: hidden;
}


/* Create two equal columns that sits next to each other */
.column {
  height:100%;
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 0 4px;
  overflow: hidden;
}

.column img {
  /*margin-top: 8px;*/
  vertical-align: middle;
  transition: transform .5s ease;
}


.column img:hover {
  transform: scale(1.5);
}

.img-parent {overflow: hidden; margin-top: 8px}


</style>
</head>
<body>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>
    <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>        <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>
  </div>
  <div class="column">
    <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>        <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>        <div class="img-parent">
      <img src="https://www.gettyimages.com/gi-resources/images/500px/983703508.jpg" style="width:100%">
    </div>
  </div>  


</div>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;


// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "50%";  // IE10
    elements[i].style.flex = "50%";
  }
}


</script>

</body>
</html>