css实现悬浮在图片上，图片缓缓变大
2019-03-02 本文已影响0人
星星的成长之路
最近写了一个小demo，图片缓缓放大，很好玩
鼠标悬浮在图片上时，字体大小不变，多了边框，图片变大为2倍，移开鼠标恢复原样，作为页面的一个动效还是蛮好看的。
效果类似于这样：
原始图片
鼠标悬浮时
代码如下：
<!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(2);
}
.image {
height: 200px;
overflow: hidden;
position: relative;
}
.scale {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1544209207-8d2b21f3c5fe?ixlib=rb-1.2.1&q=99&fm=jpg&crop=entropy&cs=tinysrgb&w=2048&fit=max&ixid=eyJhcHBfaWQiOjcwOTV9') 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>
