答案：通过CSS实现图片悬停缩放效果，先构建包含图片的容器，设置overflow隐藏溢出并用transform配合transition添加平滑放大动画，hover时scale至1.1倍，可选加阴影和指针提示增强交互体验。
实现图片悬停缩放效果是CSS初级项目中常见且实用的技能。这个效果能让用户在鼠标悬停时看到图片轻微放大，提升页面交互感和视觉吸引力。下面是一个简单、清晰的实现方法。
1. 基本HTML结构
先准备一个包含图片的容器，便于控制样式和行为：
<div class="image-container"> <img src="your-image.jpg" alt="示例图片"> </div>
2. CSS基础样式设置
为图片容器设置溢出隐藏，确保放大时图片不会溢出边界。同时设置过渡动画让缩放更平滑：
.image-container {
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 8px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
3. 添加悬停缩放效果
利用:hover伪类，在鼠标悬停时对图片应用transform: scale()实现放大：
立即学习“前端免费学习笔记（深入）”；
.image-container:hover img {
transform: scale(1.1);
}
说明：
- scale(1.1)表示放大1.1倍，可根据需要调整为1.2或1.05
- transition让变化过程更自然，避免突兀跳变
- overflow: hidden确保图片超出部分被裁剪，保持布局稳定
4. 可选增强效果
为了让体验更好，可以添加一些细节优化：
- 增加轻微阴影：box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- 悬停时加深阴影：.image-container:hover img { box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
- 改变光标样式：cursor: pointer; 提示可交互
