遮罩

4.21.1 遮罩条

自适应高度，默认隐藏，鼠标经过，从底部滑出显示

遮罩条

4.21.2 遮罩块

模块内100%高度，默认隐藏，鼠标经过显示

HTML代码

<div class="maskWraper" style="width:300px; height:250px; border:solid 1px #ddd;"> <img src="pic/AD-300x250.gif" width="300" height="250">
  <div class="maskBar text-c">遮罩条</div>
</div>

CSS代码

.maskBar{position:absolute;height:auto;left:0; bottom:-100%; right:0;padding:10px;background-color:rgba(0,0,0,0.6);z-index:2; color:#fff!important}
.maskWraper{position:relative; overflow:hidden}
.maskWraper.hover .maskBar{bottom:0px;
  transition: bottom 200ms;
  -moz-transition: bottom 200ms; /* Firefox 4 */
  -webkit-transition: bottom 200ms; /* Safari 和 Chrome */
  -o-transition: bottom 200ms; /* Opera */
}
.maskBox{position:absolute;width:100%; height:100%;top:0;left:0; bottom:0;right:0;z-index:2;color:#fff!important}
.maskWraper.hover .maskBox{background-color:rgba(0,0,0,0.6);
  transition: all 500ms;
  -moz-transition: all 500ms; /* Firefox 4 */
  -webkit-transition: all 500ms; /* Safari 和 Chrome */
  -o-transition: all 500ms; /* Opera */
}

JS代码

$(function(){
  $.Huihover('.maskWraper')}); 

注意：必须引入H-ui.js文件，依赖Huihover这个方法。