CSS3实现鼠标悬停图片缓慢放大效果

在CSS中，我们可以使用transform: scale()函数来实现图片的放大效果，并结合:hover伪类来实现鼠标悬停时的放大效果。以下是一个简单的例子：

HTML:

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

CSS:

.image-container {
  overflow: hidden; /* 确保放大后的图片不超出容器 */
  display: inline-block;
}
 
.image-container img {
  transition: transform 0.3s ease; /* 定义过渡效果 */
  max-width: 100%; /* 限制图片宽度不超过容器宽度 */
  vertical-align: middle; /* 确保图片垂直居中 */
}
 
.image-container:hover img {
  transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
}

在这个例子中，.image-container 是一个用于包裹图片的容器，它会限制图片的大小，并且在图片上应用一个过渡效果，使得放大缩小变化时不会突兀。.image-container:hover img 是当鼠标悬停在 .image-container 上时，内部 img 元素的样式变化，使图片放大1.1倍。