如何使用CSS实现图片缩放与灰化动画效果

你找的这个图片悬停缩放灰化动画核心逻辑由CSS实现，页面内的JS仅做基础的节点初始化，没有参与动画帧的计算，完全可以脱离原页面的<a className="img-box">标签结构独立使用，不会影响你绑定自定义事件处理器。

• 容器层：给图片的父容器设置overflow: hidden，裁切掉图片放大后溢出的边缘部分，父容器可以是div、button或者任意你需要的标签，不需要复用原站的类名
• 图片基础态：给图片设置初始状态，默认无灰度、缩放比例为1，配置统一的过渡属性
• 图片触发态：匹配你需要的触发条件（悬停/加类名/JS事件触发都可），给图片加灰度滤镜和缩放值即可

可直接复用的代码示例：

/* 自定义图片容器，类名可以根据你的业务需求修改 */
.custom-image-container {
  overflow: hidden;
  /* 自行设置容器需要的宽高、边距、定位等属性即可 */
}
.custom-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 过渡参数和原站效果对齐，时长0.4秒，缓动函数为ease */
  transition: all 0.4s ease;
  transform: scale(1);
  filter: grayscale(0);
}
/* 悬停触发效果，如果需要JS控制触发，把:hover换成自定义状态类比如.active即可 */
.custom-image-container:hover img {
  transform: scale(1.08);
  filter: grayscale(1);
}

如果需要匹配原站更细节的效果，可以在悬停态下给图片加opacity: 0.8的属性，质感会更贴近参考效果。缩放比例和灰度值也可以根据你的需求微调，不需要完全和原站一致。

内容的提问来源于stack exchange，提问作者János