如何实现类似示例中的CSS transition上下位移动画效果？

从预览效果和你提供的容器样式来看，目标是实现鼠标悬停时图片放大且部分裁剪的动画，具体实现步骤如下：

• 首先确保.wrap-img容器内部包含<img>标签，给图片添加基础过渡样式：

.wrap-img img {
  width: 100%;
  height: auto;
  transition: all 200ms ease; /* 和容器过渡时长保持一致，简化写法 */
  transform: scale(1);
}

• 给容器添加悬停触发的图片变换样式：

.wrap-img:hover img {
  transform: scale(1.1); /* 放大10%，可根据需求调整数值 */
  /* 若需要附加位移效果，可修改为：transform: scale(1.1) translate(0, -3%); */
}

关键说明 #

• 你现有的.wrap-img已经设置了overflow: hidden，这是核心：图片放大后超出容器的部分会被自动裁剪，形成局部放大的视觉效果
• 过渡属性transition同时应用在容器和图片上，保证动画过程流畅自然
• 缩放比例scale()的数值可按需调整，比如1.05是放大5%，1.2是放大20%
• 若要添加位移效果，在transform中追加translate()即可，实现图片悬停时的轻微偏移

内容的提问来源于stack exchange，提问作者Injaileh