答案：利用 css 的：hover 和 transform 属性配合 transition 实现图片悬停放大。首先 html 构建图片容器，CSS 设置overflow:hidden 防止溢出，通过 transition 定义过渡效果，:hover 触发 scale 放大，可选调整缩放比例、缓动函数及添加阴影等增强视觉反馈。
实现图片悬停放大动画，核心是利用 CSS 的 :hover 伪类 和 transform 属性配合 transition 过渡效果。这种方式无需 javaScript，简单高效，适用于大多数网页场景。
1. 基础结构：HTML 准备
先准备一个 img 元素，最好包裹在容器中，便于控制溢出和布局。
2. 设置基础样式与悬停放大
通过设置 transition 控制变化的平滑度，再用 :hover 触发放大效果。
.image-container {overflow: hidden; /* 防止放大时溢出 */ width: 300px; height: 200px;} <p>.image-container img {width: 100%; height: 100%; object-fit: cover; /<em> 保证图片填充且不变形 </em>/ transition: transform 0.3s ease; /<em> 平滑过渡 </em>/}</p><p>.image-container:hover img {transform: scale(1.2); /<em> 悬停时放大 1.2 倍 </em>/ }</p>3. 可选优化：提升用户体验
可以进一步调整动画表现，让交互更自然。
立即学习 “ 前端免费学习笔记（深入）”；
- 调整缩放比例：scale(1.1) 到 scale(1.3) 之间比较合适，避免过度放大导致页面跳动。
- 修改缓动函数：使用 ease-in-out 让动画起止更柔和。
- 添加其他效果：如轻微 opacity 变化或阴影增强视觉反馈。
.image-container img {transition: all 0.4s ease-in-out; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } <p>.image-container:hover img {transform: scale(1.15); opacity: 0.9; box-shadow: 0 8px 15px rgba(0,0,0,0.2); }</p>基本上就这些。只要掌握 transform 和 transition 的配合，就能轻松实现流畅的图片悬停放大效果。
