使用 transform: translatey() 配合 transition 可实现图片悬停时平滑上移效果；默认设为 translatey(0)，悬停时设为 translatey(-5px)，并添加 transition: transform 0.3s ease。

用 CSS 的 transform: translateY() 配合 transition 就能实现图片悬停时向上轻微移动的效果，平滑自然，兼容性好。

基础实现方式

给图片添加类名（比如 .hover-up），在 CSS 中设置默认状态和悬停状态：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 默认不移动：transform: translateY(0);
• 悬停时上移（例如 5px）：transform: translateY(-5px);
• 加上过渡动画让移动更柔和：transition: transform 0.3s ease;

完整 HTML + CSS 示例

HTML 部分：

CSS 部分：

.hover-up {
  transition: transform 0.3s ease;
}
.hover-up:hover {
  transform: translateY(-5px);
}

小技巧与注意事项

• 位移值不宜过大，-3px 到 -8px 比较自然，太大容易显得突兀
• 过渡时间建议 0.2s–0.4s，太短生硬，太长拖沓
• 可搭配其他悬停效果一起用，比如加阴影：box-shadow: 0 4px 12px rgba(0,0,0,0.1);
• 如需兼容老版本浏览器，可加 -webkit-transform 前缀（现代项目通常不需要）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！