用:hover控制opacity和visibility可实现图片暗淡+文字浮现，但需父容器设position: relative、文字层用position: absolute定位，并配合opacity: 0/1与transition: opacity 0.3s ease实现平滑过渡，居中推荐top: 50%; left: 50%; transform: translate(-50%, -50%)。
直接用 :hover 控制 opacity 和 visibility 就能实现，但初学者常因定位错乱、层级缺失或过渡未启用导致文字不出现、闪跳或模糊失效。
图片暗淡 + 文字浮现必须加 position: relative
这是最常被跳过的一步。没有它，文字会脱离图片上下文，飘到页面左上角或错位。
-
.container（包裹img和文字的父元素）必须设position: relative - 文字层（比如
.overlay或.caption）用position: absolute，才能以该容器为基准定位 - 若用
figure+figcaption，同样要给figure加position: relative
opacity 和 transition 缺一不可
只改 opacity 不加 transition，文字会“啪”一下硬切出来；只加 transition 但没设初始 opacity: 0，文字会一直可见。
- 文字层默认写
opacity: 0; transition: opacity 0.3s ease; - 悬停时写
.container:hover .overlay { opacity: 1; } - 避免用
display: none/block—— 它无法过渡，会导致突兀闪现 - 图片暗淡建议用
filter: brightness(0.7)或opacity: 0.8，别混用两者，否则叠加后可能过暗
文字居中显示的可靠写法
用 top: 50%; left: 50%; transform: translate(-50%, -50%) 是目前最稳定、响应式友好的居中方案，不依赖文字宽高。
立即学习“前端免费学习笔记（深入）”；
- 文字容器必须是
absolute定位，且父容器有relative - 不要靠
margin或text-align: center拼居中，它们对垂直居中无效 - 如果文字需要点击，直接用
a标签包裹，别套div再加 JS，语义和可访问性都更好
真正容易被忽略的是：所有动画属性（如 opacity、transform、filter）必须单独写进 transition，比如 transition: opacity 0.3s, transform 0.3s；只写 transition: all 0.3s 在某些浏览器里会意外触发重排，造成卡顿。
