html:
<div>
<img src="images/tu1.png" />
</div>
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的就是缩小
