CSS 如何实现图片悬浮放大效果？

Question

CSS 如何实现图片悬浮放大效果？

仓乃文 · Accepted Answer

图片悬浮放大是产品展示常用的效果，通过 overflow: hidden 裁剪溢出部分，hover 时 scale 放大图片实现。

```css
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.zoom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.zoom-image:hover {
  transform: scale(1.1);
}
```

补充说明：
- overflow: hidden 是关键，裁剪放大后溢出的部分
- object-fit: cover 保持图片比例填充容器
- transition 时间稍长（0.5s）让放大过程更优雅
- 可配合 filter: brightness() 实现变暗 + 放大的组合效果