蒙版效果:
1.插入图片标签
2.设置一个半透明的div,并定位,rgba()
3.将div与图片覆盖
4.将鼠标悬停在div上时,设置隐藏div
5.设置div的颜色渐变transition:all linear 5s(all ease-in 5s),先设置left,right,top,bootom的值,确定蒙版移动方向
注:蒙版移动前后的定位方式(left,right,top,bootom)保持一致,要将图片和蒙版div放在同一个父级里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box2{
width: 500px;
height: 500px;
outline: 1px solid black;
position: relative;
}
.mb{
height: 300px;
width: 100%;
outline: 1px solid red;
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,0.3);
/*background: linear-gradient(yellow,red);*/
transition: all ease-in 2s;
/*transition: all linear 2s;*/
}
.box2:hover .mb{bottom: 200px; transition: all ease-in 2s;}
</style>
</head>
<body>
<div class="box2">
<img src="dm_pic03.jpg" alt=""/>
<div class="mb">冯小漂儿你很棒!</div>
</div>
<div id="div"></div>
</body>
</html>