CSS3鼠标滑过放大图片效果

鼠标滑过图片自动放大，不用动一行 JS，全靠纯 CSS 搞定，蛮适合做电商图、相册预览这类交互场景的。通过:hover配合transform: scale，视觉效果挺自然，还能加上transition让动画顺滑点。结构也简单，一个.image-container包两张图，切换显示隐藏就行。

不过建议只放一张图片，通过 CSS 控制放大，不然加载两张图有点浪费。或者直接用背景图加background-size也行，看你需求。如果你页面图片多，别忘了加overflow: hidden限制容器，不然一放大就容易撑破布局。

你要是想看更多类似玩法，我这边也挑了几个还不错的资源：像Hover.css这种特效库，里面的样式直接拿来用就行。懒得写 CSS 的可以去翻翻。

，这种纯 CSS 的交互动效，写起来轻，跑得快，前端新手和老鸟都能上手。如果你也在做图文展示类的项目，真的可以试试。