最简单实现图片悬停放大是结合:hover和transform:scale()。1. 用div包裹img；2. 设置.hover-image宽高、transition及:hover时scale(1.2)；3. .image-container设固定尺寸并overflow:hidden防布局跳动；4. 可选cursor:pointer、border-radius、box-shadow增强视觉反馈，提升交互体验。
在CSS初级项目中，想实现鼠标悬停时图片放大的效果，最简单的方式就是结合 :hover 伪类和 transform: scale() 属性。这个方法不需要JavaScript，代码简洁，兼容性好，适合新手快速上手。
1. 基础HTML结构
先准备一张图片，用一个容器包裹它，便于控制样式：
@@##@@
2. 使用:hover和transform实现放大
通过CSS设置默认状态和悬停状态：.hover-image {
width: 200px;
height: auto;
transition: transform 0.3s ease;
}
.hover-image:hover {
transform: scale(1.2);
}
说明：
- scale(1.2) 表示放大到原始尺寸的1.2倍
- transition 让放大过程有平滑动画，避免生硬跳变
- ease 是默认缓动函数，让动画开始慢、中间快、结束慢
3. 避免页面跳动：设置容器固定尺寸
图片放大后可能影响布局，建议给父容器设固定大小并隐藏溢出：.image-container {
width: 200px;
height: 150px;
overflow: hidden;
}
立即学习“前端免费学习笔记（深入）”；
这样即使图片放大，也不会撑开周围元素。
4. 可选优化：添加光标提示和边框效果
提升用户体验的小细节：.hover-image {
cursor: pointer;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
悬停时也可以同步增强视觉反馈：
.hover-image:hover {
transform: scale(1.2);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
基本上就这些。掌握 hover + transform 的组合，能让你在初级项目中轻松做出专业感十足的交互效果。不复杂但容易忽略的是过渡动画和布局稳定性，加上 transition 和 overflow 就更完美了。
