用:hover配合transition实现平滑图片悬停效果需作用于容器而非img标签，通过transform、filter和伪元素实现缩放、上移、遮罩与文字显示，兼顾性能、可访问性及高DPI适配。
用 :hover 配合 transition 实现平滑图片悬停效果
纯 CSS 就能搞定，不需要 JS。关键不是“有没有效果”，而是“是否自然、是否可访问、是否在高 DPI 屏幕下不糊”。:hover 必须作用在图片容器（比如 <div> 或 <figure>）上，直接写在 <img> 上无法触发伪类过渡——因为 <img> 是替换元素，部分浏览器对它的 :hover 支持不稳定，尤其在移动端模拟时容易失效。
推荐结构：
<div class="img-hover"> <img src="photo.jpg" alt="示例图"> </div>
CSS 写法示例（缩放+轻微上移）：
.img-hover {
display: inline-block;
overflow: hidden;
}
.img-hover img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease, filter 0.3s ease;
}
.img-hover:hover img {
transform: scale(1.05) translateY(-2px);
}
-
overflow: hidden防止缩放后边缘溢出 -
display: block消除<img>默认的底部空白（行内元素基线对齐导致） - 避免只用
transform: scale()而不加translateY：纯放大易显“浮”；加轻微上移更符合视觉重力感 - 不要用
width/height动画——会触发重排（reflow），性能差；transform和filter走合成层，更流畅
hover 时替换图片或叠加文字？用 ::before 或背景图更稳妥
想实现“原图变灰 + 显示标题”这类效果，别用 JS 切换 src，也别用两个 <img> 叠加再显隐——前者破坏 SEO 和懒加载，后者增加 DOM 复杂度且可能闪屏。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
更轻量的做法是用伪元素或背景图：
.img-hover {
position: relative;
display: inline-block;
}
.img-hover::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: opacity 0.25s;
}
.img-hover:hover::before {
opacity: 1;
}
.img-hover::after {
content: "这是标题";
position: absolute;
bottom: 12px; left: 12px;
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.25s;
}
.img-hover:hover::after {
opacity: 1;
}
- 伪元素方案兼容性好（IE9+），且不干扰图片本身的
alt和懒加载逻辑 - 如果必须换图（如深色模式适配），优先用
picture+media，而非 hover 切换：<picture><source media="(prefers-color-scheme: dark)" srcset="dark.jpg"><img src="light.jpg"></picture> - 避免在
:hover中设置background-image：首次悬停会触发新图片下载，有延迟
移动端没 hover？用 @media (hover: hover) 做条件隔离
手机和平板默认没有 hover 状态，强行加 hover 效果会导致触摸设备误触发、或完全无效。别用 JS 检测 UA——不可靠，且 iOS Safari 对 hover 的支持策略在变。
标准解法是媒体查询隔离：
@media (hover: hover) {
.img-hover img {
transition: transform 0.3s ease;
}
.img-hover:hover img {
transform: scale(1.05);
}
.img-hover::before,
.img-hover::after {
transition: opacity 0.25s;
}
.img-hover:hover::before,
.img-hover:hover::after {
opacity: 1;
}
}
-
(hover: hover)表示该设备支持“稳定 hover”（比如带触控笔的 Surface、macOS 触控板开启指针悬停） - 不满足条件时，上述样式完全不生效，回归静态展示，不报错也不降级异常
- 别用
(pointer: coarse)反推——它只表示主输入是触摸，但不等于无 hover；iPadOS 就同时匹配coarse和hover
图片模糊、锯齿、闪动？检查 image-rendering 和缩放倍数
hover 缩放后图片发虚或边缘锯齿，通常不是代码写错，而是渲染策略和像素对齐问题。
- 添加
image-rendering: -webkit-optimize-contrast;（Safari）或image-rendering: crisp-edges;（Firefox）可抑制插值模糊，但仅对整数倍缩放有效 - 避免用
scale(1.07)这类非整数倍——浏览器会强制双线性插值，清晰度下降明显；scale(1.05)或scale(1.1)更稳妥 - 如果图片本身分辨率低（比如 300×200 像素却撑满 600px 宽容器），再怎么优化 CSS 也没用；确保原始图至少是目标显示尺寸的 1.5 倍（考虑 DPR=2 设备）
- 动画中出现闪动？检查是否意外触发了
will-change: transform但没配backface-visibility: hidden，某些安卓 WebView 下会重绘异常
最常被忽略的一点：hover 效果不该掩盖图片内容本身。缩放、滤镜、遮罩都只是强化，不是替代。如果用户必须悬停才能看清文字或关键细节，那设计已经失败了。
