Overflow: hidden on image hovering - css

Question

Hi guys i have a flex gallery and i added a zoom on hover but the rule overflow hidden works only on width not height. This is the code.
.brow {
display: flex;
flex-wrap: wrap;
padding: 0 4px
}
.column {
flex: 15%;
max-width: 30%;
padding: 0 4px
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.image-box {
width:auto;
overflow:hidden; !important;
}
.image {
width:auto;
height:auto;
background-position:center;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.image:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2); /* IE 9 */
transform: scale(1.2);
}
.imagine {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.image:hover .imagine {
opacity: 0.3;
}
.image:hover .middle {
opacity: 1;
}
.texting {
background-color: #0040ff;
border-radius: 10px;
color: white;
font-size: 16px;
padding: 5px 5px;
}
<div class="brow">
<div class="column">
<div class="image-box">
<div class="image"><img src="http://demostore.gr/images/promo/1/Untitled-1.png" class="imagine"> <div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"><img src="https://demostore.gr/images/promo/1/formes_wtex-w6.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
</div></div>
<div class="column">
<div class="image-box">
<div class="image"> <img src="https://demostore.gr/images/promo/1/napopsi.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"><img src="https://demostore.gr/images/promo/1/kapn.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"><img src="https://demostore.gr/images/promo/1/napopsi.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
</div></div>
<div class="column">
<div class="image-box">
<div class="image"><img src="https://demostore.gr/images/promo/1/καρτεσ.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"><img src="https://demostore.gr/images/promo/1/napopsi.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"><img src="https://demostore.gr/images/promo/1/napopsi.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
</div> </div>
<div class="column">
<div class="image-box">
<div class="image"><img src="https://demostore.gr/images/promo/1/πσι.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
</div></div>
<div class="column">
<div class="image-box">
<div class="image"> <img src="http://demostore.gr/images/promo/1/%CE%BA%CE%B1%CF%81%CF%84%CE%B5%CF%83.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
<div class="image"> <img src="http://demostore.gr/images/promo/1/sta.jpg" class="imagine"><div class="middle">
<a href="url"> <div class="texting">
Αμάνικα Μπουφάν
</div></a></div></div>
</div></div>
</div>
I need this to work properly to transfer it to another similar website. If it helps the website is this demostore. I tried it locally on my computer, i tried it on different websites to see if anything conflicts but it does the same problem everywhere so i suppose im doing something wrong. Sorry if i posted the code the wrong way but its my first time here. Thank you.

Answer 1

image-box width getting overflow because the width is bound by the width of .column (having a fixed width of 15%).
but there is no fixed height for .column. therefore it taking the image height for image-box and your column having the same height (on hover / zoom too). since the height of your image and image-box is same there is no overflow.