CSS - 鼠标移入图片放大及缓慢过渡效果（仅 “内部“ 放大，不改变容器大小）鼠标移入图片变成发大镜效果

可以使用CSS3的transform属性和transition属性来实现图片的放大和缓慢过渡效果，同时使用伪元素和背景图来实现鼠标移入图片变成放大镜的效果。

HTML代码：

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

CSS代码：

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-out;
}

.image-container:hover img {
  transform: scale(1.1);
}

.image-container .magnifier {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url('magnifier.png');
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.image-container:hover .magnifier {
  opacity: 1;
}

.image-container .magnifier:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

.image-container:hover .magnifier:before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0s linear 0s;
}

解释：

1. `image-container`是图片容器，设置`position: relative`让伪元素和放大镜在其中定位，设置`overflow: hidden`让图片超出容器部分隐藏。

2. `image-container img`是图片，设置`transition: transform 0.3s ease-out`让其在放大时有缓慢的过渡效果，设置`transform: scale(1.1)`让其在鼠标移入时放大。

3. `image-container:hover img`是图片的鼠标移入状态，设置`transform: scale(1.1)`让其放大。

4. `image-container .magnifier`是放大镜，设置`position: absolute`让其在容器内定位，设置`opacity: 0`让其初始时不可见，设置`transition: opacity 0.3s ease-out`让其在出现时有缓慢的过渡效果。

5. `image-container:hover .magnifier`是放大镜的鼠标移入状态，设置`opacity: 1`让其出现。

6. `image-container .magnifier:before`是放大镜的伪元素，设置`content: ""`让其成为一个空元素，设置`position: absolute`让其在容器内定位，设置`opacity: 0`和`visibility: hidden`让其初始时不可见，设置`transition: opacity 0.3s ease-out, visibility 0s linear 0.3s`让其在出现时有缓慢的过渡效果，同时避免出现闪烁现象。

7. `image-container:hover .magnifier:before`是放大镜伪元素的鼠标移入状态，设置`opacity: 1`和`visibility: visible`让其出现，同时设置`transition: opacity 0.3s ease-out, visibility 0s linear 0s`让其在出现时有缓慢的过渡效果，同时避免出现闪烁现象。

注意：上述代码中的放大镜图片和放大镜背景图需要自己准备。