transition必须写在非hover状态，transform-origin需设为center，父容器须加overflow:hidden——三者缺一都会导致悬停缩放失效或布局异常。
transition 必须写在非 hover 状态下
只给 :hover 加 transform: scale(1.2) 不会动——动画根本不会触发。浏览器需要提前知道“哪些属性要过渡、花多久、怎么缓动”，这个声明必须放在默认状态里。
-
.card或.image-container这类基础选择器上直接写transition: transform 0.3s ease - 别只写
transition: all 0.3s，它会过渡 width、height、margin 等可能触发重排的属性，导致卡顿或布局跳动 - 如果同时想过渡阴影，可以加：
transition: transform 0.3s ease, box-shadow 0.3s ease
transform-origin 不设 center 就会偏移
默认缩放原点是左上角，scale(1.2) 会让图片右下拉伸，视觉上像“被拽走”，旁边元素也被顶开。这不是 bug，是预期行为——只是不符合常见交互直觉。
- 必须显式设置
transform-origin: center（或50% 50%） - 这个声明要加在
img或目标元素上，不是父容器 - 如果图片宽高不固定（比如只设了
max-width: 100%），center可能不准，优先给容器设明确width/height
overflow: hidden 是防溢出的关键
放大后图片超出容器边界，不加 overflow: hidden 就会撑开布局、出现滚动条、甚至把下方卡片顶下去——尤其在 Bootstrap 的 .row 里特别明显。
- 必须加在图片的**直接父容器**上，不是 body 或外层 wrapper
- 该容器最好有明确尺寸（
width/height或aspect-ratio），否则overflow: hidden效果不可控 - 别用
display: inline包图片，它自带基线间隙，容易导致容器高度浮动；改用display: block或inline-block+vertical-align: top
移动端 hover 基本不可靠
iOS Safari 和多数安卓浏览器里，:hover 只在首次点击后短暂生效，再点就跳转了。纯 CSS 悬停放大在手机上大概率没反馈。
立即学习“前端免费学习笔记（深入）”；
- 不要指望它在触屏设备上有稳定表现
- 如果设计必须支持移动端，得用 JavaScript 监听
touchstart+touchend模拟 hover 状态 - 或者干脆放弃放大，改用点击弹出大图、长按呼出菜单等更符合移动习惯的交互
