css实现鼠标经过的时候图片放大缩小，并超出原本的宽度就隐藏

html:

       

---

css:(放大）

1:先给图片最外层的div给定宽度和高度，并写入 overflow: hidden;  进行图片放大于原本的宽度就进行隐藏

div{

        width: 300px;

        height: 300px;

        border: #000 solid 1px;

        margin: 50px auto;

        overflow: hidden;

}

2：这个是给图片的缓慢时间，在鼠标离开的时候，图片缓慢的恢复之前的大小

div img{

         cursor: pointer;

         transition: all 0.6s;

}

3：给图片特效，当鼠标经过的时候，图片缓慢放大

div img:hover{

           transform: scale(1.3);

           transition: all 1s ease 0s;

//下面的是兼容其他浏览器的

           -webkit-transform: scale(1.3);

           -webkit-transform: all 1s ease 0s;

}

---

css:缩小

只需要改第三步就可以了

transform: scale(.5);

-webkit-transform: scale(.5);

---

总结：

改变transform: scale(.5);的规律

里面的数字大于1的就是放大；小于1的就是缩小