Mouse over the mask layer to achieve 10 effects
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
float: left;
position: relative;
width: 300px;
height:300px;
border: 3px solid #000;
border-radius: 50%;
overflow: hidden;
}
.box img {
width: 100%;
height:100%;
}
.cover{
top: 300px;
left: 0; 3
}
.cover,.cover0,.cover1,.cover2,.cover3,.cover4,.cover5,.cover6,.cover7,.cover8 {
transition: all .5s;
position: absolute;
width: 100%;
height: 300px;
font-size: 24px;
font-weight: 700;
color: #fff;
text-align: center;
line-height: 300px;
border-radius: 50%;
background-color: rgba(0 ,0 ,0, .5);
}
.box:hover .cover {
top: 0px;
}
.cover1 {
top: 0px;
right:300px;
}
.box:hover .cover1 {
right:0px;
}
.cover0 {
left: 0;
bottom:300px;
}
.box:hover .cover0 {
bottom:0;
}
.cover2 {
left:300px;
top: 0;
}
.box:hover .cover2 {
left: 0;
}
.cover3{
top: 0;
left:0;
transform: rotate(90deg);
transform-origin:right bottom;
}
.box:hover .cover3 {
transform: rotate(0deg);
}
.cover4{
top: 0;
left:0;
transform: rotate(-90deg);
transform-origin:left bottom;
}
.box:hover .cover4 {
transform: rotate(0deg);
}
.cover5 {
top: 0;
left:0;
transform: scale(0);
}
.box:hover .cover5 {
transform: scale(1);
}
.yy {
transition: all .3s;
}
.box:hover .yy{
transform: scale(1.3);
}
.cover7{
top: 0;
left:0;
transform: rotateY(0deg);
}
.box:hover .cover7 {
transform: rotateY(360deg);
}
.cover8{
top: 0;
left:0;
display: none;
}
.box:hover .cover8{
display: block;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/01.jpg">
<div class="cover">一娃</div>
</div>
<div class="box">
<img src="./images/02.jpg">
<div class="cover0">二娃</div>
</div>
<div class="box">
<img src="./images/03.jpg">
<div class="cover1">三娃</div>
</div>
<div class="box">
<img src="./images/04.jpg">
<div class="cover2">四娃</div>
</div>
<div class="box">
<img src="./images/05.jpg">
<div class="cover3">五娃</div>
</div>
<div class="box">
<img src="./images/06.jpg">
<div class="cover4">六娃</div>
</div>
<div class="box">
<img src="./images/07.jpg">
<div class="cover5">七娃</div>
</div>
<div class="box">
<img src="./images/yy.jpg" class="yy">
<div class="cover6"></div>
</div>
<div class="box">
<img src="./images/3.jpg">
<div class="cover7">德华</div>
</div>
<div class="box">
<img src="./images/2.jpg">
<div class="cover8">德华</div>
</div>
</body>
</html>