鼠标悬浮图片放大

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); //放大 倍数随意
}
上一篇下一篇

猜你喜欢

热点阅读