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