答案：利用css的:hover和transform属性配合transition实现图片悬停放大。首先html构建图片容器，CSS设置overflow:hidden防止溢出，通过transition定义过渡效果，:hover触发scale放大，可选调整缩放比例、缓动函数及添加阴影等增强视觉反馈。

实现图片悬停放大动画，核心是利用 CSS 的 :hover 伪类和 transform 属性配合 transition 过渡效果。这种方式无需 javaScript，简单高效，适用于大多数网页场景。

1. 基础结构：HTML 准备

先准备一个 img 元素，最好包裹在容器中，便于控制溢出和布局。

 <div class="image-container">   <img src="example.jpg" alt="示例图片" /> </div> 

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. 可选优化：提升用户体验

可以进一步调整动画表现，让交互更自然。

立即学习“前端免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

• 调整缩放比例：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 的配合，就能轻松实现流畅的图片悬停放大效果。

以上就是如何用