#CSS# 【三】 实现鼠标移入时图片悬浮放大

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！