当鼠标悬停在图像上方时，问题会使图像比例变大 我使用缓入缓出，但在“出”中它并不像我想要的那样慢

问题描述

当我将鼠标悬停在包含图像的 div 上时，它会根据我的需要慢慢放大一点，但是，一旦我用鼠标离开该 div，图像就会回到原来的位置，而不会缓慢而平滑过渡。为什么？

.stage:hover {
    img {
      transition: all .3s ease-in-out;
      transform: scale(1.03);
    }
  }

解决方法

当您停止悬停时，img 将停止具有过渡设置，因此它只会跳回到初始比例。

尝试将过渡放在实际的 img 上：

.stage {
  background-color: gray;
  /* just to show the extent of the stage */
}

.stage img {
  transition: all .3s ease-in-out;
}

.stage:hover img {
  transform: scale(1.03);
}

<div class="stage"><img src="https://picsum.photos/id/1015/200/300"></div>