css3 鼠标滑过放大 |csslcloud 在线

/* 原始图片样式 */
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
/* 鼠标滑过放大效果 */
.img-container:hover img {
transform: scale(1.2);
transition: all 0.3s ease-out;
}

代码很简单，大家首先找到需要放大的图片所在的容器，将其设置为position:relative，这是为了防止子元素超出容器范围。接着设置img元素的宽度为100%，高度自适应。至此，大家已经完成了原始图片样式的设置。

接下来，大家将鼠标滑过img容器时的样式设为放大1.2倍，同时设置过渡效果为0.3秒，缓动方式为ease-out。这里需要注意的是，大家需要将过渡效果应用到img元素上，而不是img容器。

这样，当鼠标滑过img容器时，图片就会放大1.2倍，产生一种很好的交互效果。如果你在网页上经常看到图片放大效果，那么可以试一试这种实现方式。