css3 实现鼠标放上去图片外框不变大，里面中心放大

 <div class="img-box">
            <img src="img/index_11.png" class="img">
 </div>
css代码
.img-box{
    width: 390px;
    height: 296px;
    overflow: hidden;  //这个一定要加上  不然就不是外框不变里面变大了
}
.img{
    display: block;
    width: 100%;
    height: 100%;
    transition: all 1s;
}
.img:hover{
    transform: scale(1.4); //放大 倍数随意
}