鼠标悬浮图片放大
2020-03-24 本文已影响0人
一枚小菜
图片加类选择器,transition设置放大的速度,图片的父盒子加overflow:hidden,图片加hover:scale,里面是放大的倍数
<div class="img-box">
<img src="img/index.png" class="img">
</div>
css代码:
.img-box{
width: 400px;
height: 300px;
overflow: hidden; //这个一定要加上 不然就不是外框不变里面变大了
}
.img{
display: block;
width: 100%;
height: 100%;
transition: all 1s;
}
.img:hover{
transform: scale(1.2,1.2); //放大 倍数随意
}