html 图片缓缓出现,css实现悬浮在图片上，图片缓缓变大

最近写了一个小demo，图片缓缓放大，很好玩

鼠标悬浮在图片上时，字体大小不变，多了边框，图片变大为2倍，移开鼠标恢复原样，作为页面的一个动效还是蛮好看的。

效果类似于这样：

原始图片

鼠标悬浮时

代码如下：

.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;

}

悬浮图片变大