IMAGE & MEDIA
悬停放大图Hover Zoom
悬停时图片缓缓放大 5-12%，配文字浮现——列表卡片的标准交互。
效果预览
悬停缓缓放大 12%
适合用在哪
商品列表、文章列表、作品集、酒店/房源卡片。
容易踩的坑
- 图片容器不设 overflow:hidden，放大后溢出遮住相邻卡片和标题。
- 放大比例超过 1.15，低分辨率缩略图被放大后明显模糊。
- 关键信息只在 hover 时浮现，触屏设备用户永远看不到。
设计提示词 · Prompt
悬停放大图（Hover Zoom）：图片容器 overflow:hidden + 固定宽高比（aspect-ratio），图片层 transition:transform .6-.8s cubic-bezier(.22,1,.36,1)，悬停 scale(1.05-1.12)。放大要"慢而稳"——300ms 以下的快速缩放显得廉价。同步动作：标题变品牌色、遮罩加深 5%、或底部信息上滑。图片用 aspect-ratio + object-fit:cover 统一裁切，避免网格高度不齐。移动端用首次触摸触发一次缩放替代 hover。
Hover Zoom: Image container with overflow:hidden + a fixed aspect ratio (aspect-ratio); the image layer uses transition: transform .6-.8s cubic-bezier(.22,1,.36,1) and scales to scale(1.05-1.12) on hover. The zoom should be "slow and steady" — quick zooms under 300ms look cheap. Synchronized actions: the title turns brand color, the overlay darkens by 5%, or bottom info slides up. Use aspect-ratio + object-fit:cover to crop images uniformly and avoid uneven grid heights. On mobile, replace hover with a single zoom triggered on first touch.
常见搭配
同一页面里经常和「悬停放大图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hzoom"> <div class="d-hzoom__inner"></div> <span class="d-hzoom__tag">悬停缓缓放大 12%</span> </div>