Overflow images in y index only - html

Question

I have a mini-gallery of images which I want to use to toggle content depending on the image clicked. When hovering on the image it scales up slightly. My problem is that when scaling I want to hide the overflow off the page but still show the overflow in the y-direction. I have tried overflow-x: hidden, overflow-y: visible but the y-overflow only appears at the bottom and scrollbars appear.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 50%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
}
#images .image:hover {
transform: scale(1.1);
z-index: 10;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
</div>
Is there a way to make these act as it would with no overflow stated without a scrollbar appearing in the x direction?

Answer 1

You need to add scaling property to image instead of outer div.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 49%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
overflow: hidden;
position: relative;
border:1px solid #000;
}
#images .image:hover img {
transform: scale(1.1);
z-index: 10;
position: absolute;
left: 0;
transition: .2s;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
</div>

Answer 2

Remove overflow css from the images and add it to the body:
body {
width: 100%;
overflow: hidden;
}