CSS - 鼠标移入图片放大及缓慢过渡效果（仅 “内部“ 放大，不改变容器大小）鼠标移入图片变成发大镜效果

前言

网上大部分都是 图片整体放大了，已经超出了容器，

本文帮您实现一个如下图所示效果：

解决方案

您随便找个页面，复制以下代码运行起来。

<div class="img-content">
    <img class="imgs-hober"
    src="https://img-blog.csdnimg.cn/3d587e5d3c5f47079334bd84000b4ec0.jpeg"
    />
</div>

.img-content {
    
    
    /* 父元素宽高 */
    width: 400px;
    height: 200px;
    overflow: hidden;/*这个属性是关键*/
}
.imgs-hober {
    
    
	/* 过渡配置 */
    transition: all .5s ease .1s;
}
.imgs-hober:hover {
    
    
	/* 放大1.3倍 */
    transform: scale(1.3);
}

SEO

css - 鼠标移入图片放大及缓慢过渡效果（仅 “内部” 放大，不改变容器大小）鼠标移入图片变成发大镜效果，CSS实现鼠标移入图片放大效果，css鼠标移入图片变成发大镜效果，css鼠标移入盒子，里面的图片放大，不改变盒子大小，使用CSS3实现鼠标移到图片上图片放大，html鼠标悬停图片放大或缩小，html鼠标经过图片放大，CSS实现鼠标移入时图片的放大效果及缓慢过渡效果，css鼠标移入图片变成发大镜效果。css鼠标进入图片放大