用 CSS 的 transform: translate() 配合 :hover 可实现图片悬停平滑位移，需配合 transition 才有缓动效果，常用组合如 translateY(-6px) scale(1.03)，并注意 overflow: hidden 和 display: block 等细节。
用 CSS 的 transform: translate() 配合 :hover 伪类，就能让图片悬停时平滑位移，无需 JavaScript。
基础位移写法（上下/左右移动）
给图片添加类名，然后在 hover 状态下用 translateX() 或 translateY() 控制方向和距离：
-
translateX(10px)：向右平移 10 像素 -
translateY(-5px)：向上平移 5 像素（负值向上） -
translate(8px, -12px)：同时向右 8px、向上 12px
加上过渡动画更自然
只写 transform 不会动得顺滑，必须加 transition 才有缓动效果：
- 在图片默认样式里写：
transition: transform 0.3s ease; -
ease是缓入缓出，也支持ease-in（缓入）、linear（匀速）等 - 时间建议 0.2s–0.4s，太短不明显，太长显得拖沓
常见实用组合示例
比如让图片悬停时微微上浮 + 轻微放大，增强交互感：
立即学习“前端免费学习笔记（深入）”；
- 默认样式：
transform: scale(1); - hover 样式：
transform: translateY(-6px) scale(1.03); - 记得同时加 transition，否则缩放和位移都不会有动画
注意细节避免翻车
位移效果容易忽略但影响体验的点：
- 图片父容器最好设
overflow: hidden，防止位移后边缘溢出 - 若图片是行内元素（如没设
display: block），位移可能引发布局抖动，建议统一设为display: block - 移动端 hover 不触发，如需兼容可额外加
:active或用 JS 模拟
