图片灰度悬停变色特效（grayscale 滤镜 4 种玩法 CSS 源码）

效果演示（真实可交互）

把鼠标移到任意一张卡片上，体验灰度 ↔ 彩色之间的平滑过渡。示例用渐变占位图演示，实际项目中把 .gs-img 里的内容换成 <img> 即可。

完整代码

HTML 结构：每张卡片是一个 figure，内部 .gs-img 是图片容器（项目中替换为真实 <img> 标签）：

<figure class="gs-card">
  <div class="gs-img gs-to-color"><span>🌅</span></div>
  <figcaption>① 灰度 → 彩色</figcaption>
</figure>
<!-- 换用 gs-to-gray / gs-zoom / gs-sepia 切换玩法 -->

核心 CSS：

.gs-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              filter .45s ease, box-shadow .45s ease;
  will-change: transform, filter;
}

/* ① 默认灰度，悬停恢复彩色 */
.gs-to-color { filter: grayscale(1); }
.gs-card:hover .gs-to-color { filter: grayscale(0); }

/* ② 默认彩色，悬停变灰度 */
.gs-card:hover .gs-to-gray { filter: grayscale(1); }

/* ③ 灰度 + 悬停放大，层次更丰富 */
.gs-to-zoom { filter: grayscale(1); }
.gs-card:hover .gs-to-zoom {
  filter: grayscale(0);
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* ④ 复古 sepia → 悬停彩色 */
.gs-sepia { filter: sepia(.6) saturate(1.1); }
.gs-card:hover .gs-sepia { filter: sepia(0) saturate(1); }

参数说明

兼容性与性能

• 纯 CSS 实现，无 JS 依赖，Chrome / Firefox / Safari / Edge 现代版本全部支持
• filter 与 transform 均由 GPU 参与合成，多张图同时动画时性能良好
• 注意 aspect-ratio 需要 Chrome 88+ / Safari 15+，老项目可用 padding-top 百分比技巧代替
• 列表页同时悬停多张图时，filter 动画在低端设备可能掉帧，可去掉 box-shadow 动画减负

常见问题

Q: 项目里是真实图片，怎么替换占位图？ 把 .gs-img 内部换成 <img src="...">，并设置 width: 100%; height: 100%; object-fit: cover;，滤镜直接作用在图片上即可，CSS 完全不用改。

Q: 移动端没有 hover，灰度效果会怎样？ 触屏上首次点击会触发 hover 态让图片恢复彩色，再次点击离开。如果希望默认全彩、点击才变灰，可以给 .gs-img 加 @media (hover: none) 规则关闭灰度。

Q: 为什么我的图片悬停时过渡很生硬？ 检查 filter 是否写在 transition 属性列表中，transition: filter .45s ease 不能省略，否则状态切换是瞬变的。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名，欢迎按需修改配色与时长。