[分享]css划入图片从中间放大

CSS可以实现划入图片从中间放大的效果。具体实现方法如下：

/*设置图片容器的宽度和高度，并设置为相对定位*/
.image-container {
    width: 300px;
    height: 200px;
    position: relative;
}

/*设置图片的宽度和高度，并设置为绝对定位*/
img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transform: scale(0.8); /*设置图片初始大小为原来的80%*/
    transition: transform 0.5s ease; /*设置过渡效果*/
}

/*设置鼠标悬停时的效果*/
img:hover {
    transform: none; /*设置图片大小为原来的100%*/
} 

在上述代码中，首先为图片容器设置了宽度和高度，并将其设为相对定位，以便里面的图片可以使用绝对定位。接着，设置图片的宽度和高度为100%，并将其设置为绝对定位，使得图片可以在容器中任意位置显示。使用object-fit: cover属性可以使得图片不失真、不拉伸地填满整个容器。

在鼠标悬停时，我们使用:hover伪类来控制图片的大小，通过设置transform属性的值来实现从中心放大的效果。设置transition属性可以使得效果更加平滑。