CSS实现鼠标移入时图片悬浮放大
在页面的前端开发过程中，悬浮放大效果是非常常见的，
所以为了更快理解悬浮放大效果的制作，我们首先要来看下这几个名词的概念
第一个：
overflow: hidden
就是给一个元素中设置overflow:hidden，
那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位
第二个：
transform:scale()
可以实现按比例放大或者缩小功能
第三个：
transition
可以设置动画执行的时间，实现缓慢或者快速的执行动画
经常写成：
transition: all xx秒
而它们的使用有两种情况
——等比例悬浮缩放以及x轴，y轴对应缩放
第一种情况，等比例缩放
（就是x,y是使用transform: scale(1.1)这种类型的）
.big-box div {//这个是包着图片的大盒子width: 311px;height: 175px;border-radius: 5px 5px 0 0;background-color: #333333;overflow: hidden;//隐藏超出的部分}.big-box div:hover {cursor:pointer; //经过页面时，鼠标会变成一只手}.big-box img {width: 100%;height: 100%;background-color: #F9B008;transform: scale(1.1); //原本的图片的大小，图片原来的大小不变transition: all 0.6s;}.big-box img:hover{transform: scale(1.2);//图片按照比例，整体放大了1.2倍// 当鼠标经过是图片放大的倍数为1.2倍}
第二种情况，宽度高度各自缩放
（就是x,y是使用transform: scale(1，1)这种类型的）
当transform: scale(1，1），里面是使用逗号的时候，说明就是x,y轴各自进行缩放
再看hover，里面的数值transform: scale(2，4)
就是第一个数值就是x轴放大的倍数，第二个数值是y轴放大的倍数，
就是x轴为2，即系x轴放大了2倍，y轴为4，就是y轴放大了4倍
.big-box div {width: 311px;height: 175px;border-radius: 5px 5px 0 0;background-color: #333333;overflow: hidden; //隐藏超出的部分}.big-box div:hover {cursor:pointer;}.big-box img {width: 100%;height: 100%;background-color: #F9B008;transform: scale(1，1); //x轴,y轴transition: all 0.6s; //设置动画执行的时间为0.6s}.big-box img:hover{transform: scale(2，4);//x轴放大了2倍，y轴放大了4倍}
综上所述，我们在设置图片的悬浮效果时，
一般会有以上的两种情况呈现，
为了避免出现变形的情况，我们通常都是使用第一种做法，等比例缩放，
然后切记不要忘记在父盒子里面加上 overflow: hidden！
如果觉得《#CSS# 【三】 实现鼠标移入时图片悬浮放大》对你有帮助，请点赞、收藏，并留下你的观点哦！
