css实现悬浮在图片上，图片缓缓变大
最近写了一个小demo，图片缓缓放大，很好玩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.card {
width: 50%;
margin: 0 auto;
padding: 20px;
}
.card:hover {
box-shadow: 0 0 25px rgba(186, 204, 207, 0.7);
}
.card:hover .scale {
transform: scale(1.2);
}
.image {
height: 200px;
overflow: hidden;
position: relative;
}
.scale {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background: url('./1111.jpeg') no-repeat center;
background-size: cover;
transition: all 0.6s ease;
}
.title {
width: 100%;
text-align: center;
color: #fff;
font-size: 24px;
line-height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div class="card">
<div class="image">
<div class="scale"></div>
<div class="title">悬浮图片变大</div>
</div>
</div>
</body>
</html>
