Keep row height on animated flex boxes - css

Question

I'm using flex to display as set of divs and animating the images by setting their width to 95% on hover. This is my CSS:
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 1.5%;
align-items: center;
flex: 0 1 48%;
}
.img-container img {
width: 100%;
transition: width ease-in 0.15s;
}
.img-container:hover img {
width: 95%;
transition: width ease-in 0.15s;
}
My problem is that, because of the animation duration, if I hover on images from the top row, for a brief moment both animations are active, forcing the row's height to decrease, which makes the elements beneath it bounce up and down.
Is there a way to force the row to keep its height constant during these animations?
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 1.5%;
align-items: center;
margin-right: 2%;
flex: 0 1 48%;
}
.box:nth-of-type(2n) {
margin-right: 0;
}
.img-container {
text-align: center;
position: relative;
animation: fadein 1s;
animation-timing-function: ease-out;
}
.img-container img {
width: 100%;
transition: width ease-in 0.15s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.img-container:hover img {
width: 95%;
transition: width ease-in 0.15s;
}
<div class="container">
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=1">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=2">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=3">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=4">
</div>
</div>
</div>
Example in this plunker.

Answer 1

You animate with transform: scale() instead. It will give you a much smoother animation and the other elements won't be affected.
.img-container img {
width: 100%;
transition: transform ease-in 0.15s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.img-container:hover img {
transform: scale(.95);
}
Stack snippet
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 1.5%;
align-items: center;
margin-right: 2%;
flex: 0 1 48%;
}
.box:nth-of-type(2n) {
margin-right: 0;
}
.img-container {
text-align: center;
position: relative;
animation: fadein 1s;
animation-timing-function: ease-out;
}
.img-container img {
width: 100%;
transition: transform ease-in 0.15s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.img-container:hover img {
transform: scale(.95);
}
<div class="container">
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=1">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=2">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=3">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="http://via.placeholder.com/800x800?text=4">
</div>
</div>
</div>