今天我要给大家分享一个CSS图片放大的DEMO，让大家了解怎样能够让图片随着鼠标悬浮变大。 下面是展示效果：

悬浮鼠标使图片变大

.img-zoom {
display: block;
width: 100%;
max-width: 350px;
transition: transform .2s;
margin: auto;
overflow: hidden;
}
.img-zoom:hover {
transform: scale(1.1);
}

首先，在HTML文件中我们需要为图片标签添加一个class命名为“img-zoom”。接下来，在CSS代码中，我们定义了两个用于对图片进行放大的样式：.img-zoom和.img-zoom:hover。 在.img-zoom样式中，我们设置图片的默认显示样式。具体来说，我们设定图片的宽度为100%，最大宽度为350px，使用了transition来控制图片变化的过程，同时，图片的margin值为auto，使其水平居中。为了防止图片的外部容器被图片放大撑开，我们设置了overflow：hidden。 接下来，在.img-zoom:hover样式中，我们使用transform属性将图片放大至原本大小的1.1倍。当鼠标离开图片时，图片会按照同样的过渡时间以动画形式恢复原始大小。 当我们完成了CSS的编写后，只需要在HTML文件中应用该样式即可。通过以上代码，您就可以让图片在用户悬停鼠标时变大，从而更好地吸引用户的注意力。 到此，本次关于CSS图片放大的DEMO分享就结束了。感谢您的耐心阅读！