效果
思路
1.设置4个div
<div class="cards">
<div class="red"></div>
<div class="blue"></div>
<div class="purple"></div>
<div class="brown"></div>
</div>
2.设置伪元素after,用于实现阴影效果
.cards > div:after {
content: "";
background: inherit;
filter: blur(.9em);
opacity: 0;
height: 20%;
width: 70%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
transition: opacity 1s, bottom 0.5s;
}
3.设置hover,用transition实现动画过渡效果
.cards > div:hover:after {
opacity: .8;
bottom: -1.2em;
}
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大</title>
<style>
.cards {
margin: auto;
padding: 1em;
background: white;
width: 640px;
}
.red { background: tomato; }
.blue { background: steelblue; }
.purple { background: mediumpurple; }
.brown { background: rosybrown; }
.cards > div {
margin: 2em;
width: 250px;
height: 250px;
display: inline-block;
position: relative;
transition: transform 0.5s;
}
.cards > div:hover {
transform: scale(1.2);
cursor: pointer;
}
.cards > div:after {
content: "";
background: inherit;
filter: blur(.9em);
opacity: 0;
height: 20%;
width: 70%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
transition: opacity 1s, bottom 0.5s;
}
.cards > div:hover:after {
opacity: .8;
bottom: -1.2em;
}
</style>
</head>
<body>
<div class="cards">
<div class="red"></div>
<div class="blue"></div>
<div class="purple"></div>
<div class="brown"></div>
</div>
</body>
</html>