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

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

基础实现方式

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

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

完整 HTML + CSS 示例

HTML 部分：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<img src="example.jpg" alt="示例图" class="hover-up">

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 前缀（现代项目通常不需要）