css鼠标经过图片变大代码

要实现这个效果，可以使用CSS中的:hover伪类。当鼠标悬停在图片上时，可以通过调整图片的大小来实现变大的效果。以下是一个简单的示例：

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

.image-container {
  width: 200px; /* 设置容器宽度 */
  overflow: hidden; /* 隐藏超出容器部分的图片 */
}
 
.hover-image {
  width: 100%; /* 默认情况下，图片填充容器宽度 */
  transition: transform 0.3s ease; /* 平滑变化 */
}
 
.hover-image:hover {
  transform: scale(1.1); /* 鼠标悬停时，图片缩放1.1倍 */
}

在这个例子中，.image-container 是用来限制图片大小的容器，而 .hover-image 是图片的类。当鼠标悬停在图片上时，.hover-image:hover 规则将会被应用，图片的大小会通过 transform: scale(1.1); 缩放1.1倍。transition 属性用于使缩放效果平滑。