鼠标移入，图片放大

效果之前：

之后

Code

.rect{                width:600px;                height:338px;overflow:hidden;}.img{transition:1s;}.img:hover{transform:scale(1.2);}

解释

1. 外层 div 设置 overflow:hidden; ：意为超出div宽高的部分不显示
2. 内层 img 设置 .img:hover{transform:scale(1.2);} 当鼠标指上去的时候放大;

• transform: 对元素进行旋转、缩放、移动或倾斜，详情方法：https://www.w3school.com.cn/cssref/pr_transform.asp;
• transition：元素动画， 详细使用方法：https://zhuanlan.zhihu.com/p/337001882

备注

1. transition： 这里面的4种，我测试了，但是没明白啥效果，至少我测试效果不明显，或者我代码有问题，又或者菜鸟的在线html有点问题无法实现

参考

1. 实现思路，然后自己对着他的代码来了一遍：https://blog.csdn.net/m0_59792745/article/details/127078853
2. 在菜鸟教程在线编辑器实现：https://www.runoob.com/try/try.php?filename=tryhtml_intro
3. 文档查询：
   • https://www.w3school.com.cn/cssref/pr_transition.asp
   • https://zhuanlan.zhihu.com/p/337001882