当鼠标划过的时候缩放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
.box{
width: 200px;
height: 200px;
margin:200px auto;
}
.box:hover{
transform: scale(1.5);
}
.blue:hover{
transform:scale(2);}
.blue{
background:url(1.jpg) center center / cover no-repeat;
position: relative;
}
.yellow{
background-color:yellow;
position: absolute;
right:300px;
top: 0px;
}
.green{
background-color:green;
position: absolute;
left: 300px;
top: 0px;
}
</style>
</head>
<body>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box yellow"></div>
</body>
</html>效果展示：
