必须为图片父容器设position: relative，否则absolute标题会相对于body等祖先偏移；应使用transform: translateY()替代bottom百分比实现滑入，配合transition和z-index确保层级与动效准确。
图片标题滑入时位置错乱、不贴底
用 position: absolute 定位标题时，如果父容器没设 position: relative，标题会相对于最近的定位祖先（甚至 body）偏移，导致滑入起点不在图片底部。必须确保图片容器是定位上下文：
- 给图片外层包裹一个
<div class="img-wrapper"> <li>在该 div 上加 <code>position: relative - 标题元素（如
<div class="caption">）设 <code>position: absolute; bottom: -100%; left: 0; right: 0;—— 注意不是0，而是负值，让它初始完全藏在下方transition 没生效或滑动生硬
只写
transition: bottom 0.3s不够：CSS 过渡需要明确的「可动画属性」和「起止值」。如果起始状态用bottom: -100%，结束状态用bottom: 0，但百分比在不同容器中计算逻辑易出错（尤其当父容器高度不固定）。更稳妥的做法是用transform: translateY()：- 初始状态：
transform: translateY(100%);（向下偏移自身高度） - 悬停状态：
transform: translateY(0); - 过渡声明：
transition: transform 0.3s ease-in-out; - 额外加
will-change: transform;可提升部分浏览器渲染性能
文字遮挡、背景不显或层级错乱
标题默认是 inline 元素或无背景的块级元素，滑入后可能透明、被图片盖住、或文字模糊。需主动控制：
- 加
background: rgba(0,0,0,0.7);提供可读底色 - 设
color: white;和text-align: center;保证基础可读性 - 用
z-index: 1;确保标题在图片之上（注意：仅对定位元素有效） - 避免用
font-size: 0或line-height: 0清除间隙——会导致文字不可见；改用font-size: 14px;显式定义
移动端 hover 失效或响应异常
手机端没有真正意义上的
:hover，第一次点击会触发伪 hover，第二次才进真实交互，体验割裂。不能只依赖:hover：立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 补充
touchstart和touchend切换 class（例如.is-active），再用 CSS 控制该 class 下的transform - 或直接放弃滑入动效，在移动端降级为淡入：
opacity: 0 → opacity: 1，并保持transition同时作用于opacity和transform - 别忘了加
@media (hover: none) and (pointer: coarse)媒体查询做针对性适配
overflow: hidden，而标题初始transform: translateY(100%)超出范围，某些旧版 Safari 会裁剪掉过渡过程中的中间帧。务必检查父容器是否意外截断了动画路径。 - 初始状态：
