<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>hover上滑</title>
<style >
.ImgBox {
width: 130px;
height: 130px;
overflow: hidden;
position: relative;
}
.ImgBox img{
width:100%;
height: 100%;
}
.hoverImg {
position: absolute;
top:130px;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
.ImgBox:hover .hoverImg{
top: 0;
transition:all .3s ease-in-out .2s;
}
</style>
</head>
<body>
<div class="ImgBox">
<div class="Img">
<img src="./images/15036308618249.jpg" alt="">
</div>
<div class="hoverImg"></div>
</div>
</body>
</html>
css中hover上滑
猜你喜欢
转载自blog.csdn.net/qq_39019768/article/details/80345729
今日推荐
周排行