遮罩条
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
4.19.1 遮罩条
自适应高度,默认隐藏,鼠标经过,从底部滑出显示

4.19.2 遮罩块
模块内100%高度,默认隐藏,鼠标经过显示

HTML
SCSS
CSS
JS
<div class="hui-mask" style="width:300px; height:250px; border:solid 1px #ddd;"> <img src="//images.h-ui.net/www/AD-300x250.gif" width="300" height="250"> <div class="mask-bar text-c">遮罩条</div> </div>
.hui-mask { position: relative; overflow: hidden; .mask-bar { 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; } &.hover .mask-bar { bottom: 0px; -ms-transition: bottom 200ms; transition: bottom 200ms; } .mask-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; color: #fff!important; } &.hover .mask-box { background-color: rgba(0, 0, 0, 0.6); -ms-transition: all 500ms; transition: all 500ms; } }
.hui-mask { position: relative; overflow: hidden; } .hui-mask .mask-bar { 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; } .hui-mask.hover .mask-bar { bottom: 0px; transition: bottom 200ms; } .hui-mask .mask-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; color: #fff !important; } .hui-mask.hover .mask-box { background-color: rgba(0, 0, 0, 0.6); transition: all 500ms; }
$(function(){ $.Huihover('.hui-mask') });