css transition on one image causes nearby images jitter - css

Question

Why a mouse over transition in one image causing a jitter in nearby images?
The images are large and fits in the div with width:100%.
Observed the issue in chrome.
.post:hover figure img {
transform: scale(1.03);
}
.post img {
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
}

Answer 1

/* Main Div css start here */
.slide_Wrapper {
display: flex;
}
/* This is for child div */
.slide {
width: 290px;
height: 160px;
overflow: hidden;
background: #000;
margin:10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 10px;
}
/* This is for child div border */
.slide::after {
content: "";
position: absolute;
width: 90%;
height: 82%;
border: 2px solid #fff;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
}
/* Background images */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
position: absolute;
}
/* Background images on hover */
.slide:hover img {
transform: scale(1.2);
}
/* Text */
.slide h2{
position: relative;
z-index: 2;
color: #fff;
}
<!-- Here I create a main div and two child div -->
<div class="slide_Wrapper">
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>XYZ</h2>
</div>
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>ABC</h2>
</div>
</div>