css 鼠标划过 图片放大 实现

版权声明：支持技术共享 https://blog.csdn.net/qq_38350907/article/details/83743324

荆轲刺秦王

有时候我们在静态网页中需要加一些动作，或者特效使我们的网页效果看起来更生动

我们经常会看到有些网站的图片是这样的效果：

<style>

.img_box{width:200px;height:200px;overflow: hidden;}
.img{width:100%;transition: all 0.6s;}
.img:hover{transform: scale(1.2);}

</style>

<div class="img_box"><img src="https://img-blog.csdnimg.cn/20181105090020709.jpg" class="img"></div>

代码分析：
1、首先知道 div 和 img 的层次关系，img 是在 div 里面，图片放大后不应该超出 div 的盒子。
2、设置 div 的 overflow: hidden; 属性，作用是图片变大后超过 div 区域的部分会自动隐藏。
3、设置 transition: all 0.6s; 属性和 transform: scale(1.2); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.2); 是变化范围，  scale(1.2) 是放大1.2倍的意思。

扩展一：如果我们希望图片不受限于 div 里面  只需要把 div 的overflow: hidden; 属性去掉就可以了。

扩展二：考虑到不同浏览器的兼容性，可以将 img 的属性改为：

-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);