transition 必须设在 img 元素自身，如 img { transition: transform 0.4s ease; }，设在父容器无效；scale(1.2) 是安全起点，过高易模糊或溢出；文字需用 opacity 和 transform 分开过渡；移动端应避免纯 :hover，改用 :active 或 javascript 模拟。
transition 该设在图片本身还是父容器上
必须设在 img 元素自身，不能只写在父容器（如 .card 或 figure）上。因为 transform: scale() 作用对象是图片，而 transition 需要和被动画的属性处于同一元素层级，否则缩放不会产生过渡效果。
常见错误是把 transition 写在包裹 img 的 div 上，结果 hover 时图片“啪”一下跳变，毫无动画感。
- ✅ 正确：
img { transition: transform 0.4s ease; } - ❌ 错误：
.img-wrapper { transition: transform 0.4s ease; }（对 wrapper 缩放没用，图片尺寸不变） - ⚠️ 注意：如果图片用
object-fit: cover且父容器有固定宽高，缩放后可能裁剪区域偏移，需配合transform-origin调整锚点
scale 值设多少才不糊、不溢出
scale(1.2) 是安全起点；超过 scale(1.5) 就容易触发两个问题：一是图片像素拉伸导致模糊（尤其低分辨率图），二是超出父容器造成横向滚动或遮挡。
实际取值要看图片原始尺寸与容器比例：
- 若图片宽高比和容器一致，
scale(1.3)通常可接受 - 若图片明显小于容器（比如 300×200 图放在 600×400 区域），
scale(1.8)可能已模糊 - 想防溢出，给父容器加
overflow: hidden，但要注意这会裁掉缩放后多出来的部分 - 更稳妥的做法是用
max-width: 100%+height: auto保证原始比例，再基于此做 scale
hover 缩放时文字怎么同步淡入
文字和图片要共用同一个触发源（即同个 :hover 状态），但动画属性得分开声明——transform 和 opacity 都是廉价可过渡属性，可以一起写进 transition。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
示例结构：<figure class="photo-item"><img><figcaption>描述</figcaption></figure>
- 给
figcaption初始设opacity: 0; transform: translateY(10px); - 在
.photo-item:hover figcaption中设opacity: 1; transform: translateY(0); - 在
figcaption上写transition: opacity 0.3s ease, transform 0.3s ease; - ⚠️ 别用
display: none → block切换，它不可过渡，会导致文字“闪现”
移动端 touch 设备怎么兼容 hover 效果
纯 :hover 在 iOS Safari 和 Android Chrome 上默认不触发，除非用户“轻点两下”模拟悬停——这显然不是预期行为。
真正可行的方案只有两个：
- 放弃 hover，改用
:active（按住时缩放），适合卡片式列表，但体验偏“点击反馈”而非“悬停预览” - 用 JavaScript 监听
touchstart给元素加临时类（如is-touched），CSS 里写.photo-item.is-touched img { transform: scale(1.2); } - 别依赖
hover媒体查询（如@media (hover: hover)），它在很多安卓浏览器里返回 false，导致动画直接失效
响应式图片缩放的复杂点不在写法，而在缩放后的内容边界控制和跨设备一致性——尤其是当图片尺寸不确定、容器又用 Flex/Grid 自适应时，transform-origin 和 overflow 的组合必须实测，不能只看设计稿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
