HTML
<body>
<div class="box">
<img src="./3.jpg" alt="">
<div class="box2"></div>
</div>
</body>
css
下侧滑入
<style>
.box{
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 300px;
height: 300px;
border-radius: 50%;
}
.box2{
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: .5s;
}
.box:hover .box2{
transform: translate(0,-100%);
}
</style>
右侧滑入
<style>
.box{
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 300px;
height: 300px;
border-radius: 50%;
}
.box2{
position: absolute;
width: 300px;
height: 300px;
top: 0px;
left: 300px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: .5s;
}
.box:hover .box2{
transform: translate(-100%,0);
}
</style>
上侧滑入
<style>
.box{
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 300px;
height: 300px;
border-radius: 50%;
}
.box2{
position: absolute;
width: 300px;
height: 300px;
top: -300px;
left: 0px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: .5s;
}
.box:hover .box2{
transform: translate(0,100%);
}
</style>
下侧滑入
<style>
.box{
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 300px;
height: 300px;
border-radius: 50%;
}
.box2{
position: absolute;
width: 300px;
height: 300px;
top: 0px;
left: -300px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: .5s;
}
.box:hover .box2{
transform: translate(100%,0);
}
</style>