蒙版
蒙版效果：
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>
