html:自定义一个盒子和一张图片
<div><img src="./02.jpg"></div>
css:利用c3的缩放属性scalscale
<
style
>
//定义盒子的大小,不要忘记隐藏
div {
width:
200px;
height:
100px;
overflow: hidden;
}
//图片自适应
img {
width:
100%;
height:
100%;
}
//鼠标移动事件
div:hover img {
transform: scale(
1.5);
transition: all
1s;
}
<
/
style
>
实现的效果:当鼠标移动到盒子上的时候,图片放大1.5倍,溢出的部分隐藏