css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片

实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容器内操作.切记不要忘记在父盒子里面加上 overflow: hidden！

<div class="big-box">
	<img src="../img/xxx.png">
</div>

常用css 属性

overflow: hidden 该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位
transform:scale() 可以实现按比例放大或者缩小功能
transition 可以设置动画执行的时间，实现缓慢或者快速的执行动画
经常写成：transition: all xx秒

.big-box{
	width: 60px;
	height: 50px;
	margin-top: 20px;
	margin-left: 30px;
	padding: 5px 5px 5px 5px; // padding 可以让图片在div上下左右居中,这样图片在放大时,不会被div容器遮挡
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}
.big-box :hover{
	cursor: pointer; // 鼠标移入变为小手
}
.big-box img{
	height: 30px;
	transform: scale(1.1); //原本的图片的大小，图片原来的大小不变
	transition: all 0.6s;
	
}
.big-box img:hover{
	transform:scale(1.5); //图片按照比例，整体放大了1.2倍
                       // 当鼠标经过是图片放大的倍数为1.2倍
}

transform 分为等比例缩放和宽高不等比缩放
等比缩放: transform: scale(1.1) // x和y 都是1.1
非等比缩放: transform: scale(1，2) //x轴,y轴分别是1 和2