一、效果展示
二、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: black;
}
.box {
width: 250px;
height: 300px;
border-radius: 50%;
border: 4px solid white;
overflow: hidden;
position: relative;
box-shadow: 0 0 30px skyblue;
display: inline-block;
margin: 10px;
}
.box .cover {
position: absolute;
background-color: black;
width: 250px;
height: 300px;
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition: all 1s ease;
font-size: 50px;
line-height: 300px;
text-align: center;
font-family: "楷体";
}
.box:hover .cover {
opacity: 0.5;
transform: scale(1);
}
.box #lufei_img {
height: 100%;
position: absolute;
left: -15px;
}
.box #suolong_img {
height: 100%;
position: absolute;
left: -50px;
}
.box #namei_img {
height: 100%;
position: absolute;
left: -20px;
}
.box #wusupu_img {
height: 100%;
position: absolute;
left: -30px;
}
.box #shanzhi_img {
height: 100%;
position: absolute;
left: -20px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/cover_lufei.png" alt="" id="lufei_img">
<div class="cover" style="color: red;">路飞</div>
</div>
<div class="box">
<img src="./img/cover_suolong.png" alt="" id="suolong_img">
<div class="cover" style="color: green;">索隆</div>
</div>
<div class="box">
<img src="./img/cover_namei.png" alt="" id="namei_img">
<div class="cover" style="color: orange;">娜美</div>
</div>
<div class="box">
<img src="./img/cover_wusuopu.png" alt="" id="wusupu_img">
<div class="cover" style="color: seagreen;">乌索普</div>
</div>
<div class="box">
<img src="./img/cover_shanzhi.png" alt="" id="shanzhi_img">
<div class="cover" style="color: yellow;">山治</div>
</div>
</body>
</html>