用纯css写图片局部放大效果的代码。

以下是用纯CSS写图片局部放大效果的代码：

HTML代码：

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="zoom"></div>
</div>

CSS代码：

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.image-container:hover img {
  transform: scale(1.1);
}
.zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}
.image-container:hover .zoom {
  opacity: 1;
}

解释：

- `.image-container`是图片的容器，设置了宽度、高度和溢出隐藏。`position: relative`用于定位`.zoom`。
- `.image-container img`是图片，设置了宽度、高度和过渡效果。当鼠标悬停在`.image-container`上时，使用`transform: scale(1.1)`放大图片。
- `.zoom`是用于局部放大的圆形区域，设置了宽度、高度、边框和不透明度。使用`position: absolute`、`top: 50%`、`left: 50%`和`transform: translate(-50%, -50%)`将其居中定位在`.image-container`中心。
- 当鼠标悬停在`.image-container`上时，`.zoom`的不透明度从0.7变为1，使其更加明显。

注意：

- 这种方法只能用于局部放大，放大比例为1.1，可根据需要进行更改。
- 如果需要使用其他形状的放大区域，可以使用SVG或伪元素来实现。