H5模板遮罩效果从底部上升的遮罩效果
HTML
<div class="content">
<ul class="contentbox">
<li class="con">
<div id="">
<h3>内容⼀</h3>
</div>
<div class="txt">
h5免费模板下载
<h3>内容⼀，内容⼀</h3>
</div>
</li>
<li class="con">
<div id="">
<h3>内容⼆</h3>
</div>
<div class="txt">
<h3>内容⼆，内容⼆</h3>
</div>
</li>
<li class="con">
<div id="">
<h3>内容三</h3>
</div>
<div class="txt">
<h3>内容三，内容三</h3>
</div>
</li>
</ul>
</div>
CSS
.content{
width:1200px;
height: 428px;
margin:20px auto;
padding: 15px 25px 15px 25px; }
.con{
border: solid 1px red;
width: 270px;
height: 200px;
float: left;
margin-right: 35px;
margin-bottom: 15px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.txt{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
line-height: 0px;
text-align: center;
color: lightcoral;
background: yellow;
}
.txt h3{
font-weight: normal;
}