← 返回导航

图片缩放

hovers

日落海岸

悬停查看放大与标题浮现

关键点

  • 图片缩放效果在 hover 时将图片 scale 放大，配合遮罩和标题浮现增强层次感
  • 外层容器设置 overflow: hidden，确保图片放大时不会超出容器边界
  • 使用 transition 平滑过渡，让放大过程有"推近镜头"的感觉
  • 遮罩层用伪元素或独立 div，初始透明，hover 时渐显，叠加在图片之上
  • 标题文字从下方滑入或渐显，配合遮罩一起出现，信息揭示更有仪式感

效果说明

图片悬停放大 + 标题遮罩浮现。容器 overflow: hidden 裁剪超出部分，内部图片 scale 放大，形成"拉近"的视觉效果；同时底部标题从半透明遮罩中浮现。这是图片画廊、商品卡片最常用的悬停组合，纯 CSS 即可完成。