一张图片上的css过渡会导致附近的图片抖动

Question

为什么鼠标停留在一张图片上会引起附近图片的抖动？

图像很大，可以放在width:100%的div中。

​

​

已在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>

​