标签:pos 设置 遮罩层 遮罩 oci overflow 绝对定位 sel position
1.html
<div class="div1"> | |
<div class="div11"> | |
<p >Dolor nunc vule putateulr<br/><br/>March 23rd, 2015 5 Comments | |
<br/><br/>Praesent vestim molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. | |
Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, | |
nascetur ridiculus mus. | |
</p> | |
</div> | |
</div> |
2.css设置实现功能。(父级元素设置相对定位,子元素绝对定位(子绝对,父相对))
.div1,.div2,.div3{float:left;margin:0 20px 0 25px;overflow:hidden;position:relative;}
.div1{width:350px;height:260px;background:url("images/img10.jpg");}
.div1>.div11{width:350px;height:260px;position:absolute;left:0px;top:232px;background:cyan;opacity:0.7;transition:1s linear;}
.center-wen>.div1:hover .div11{top:0;}
3.效果
标签:pos 设置 遮罩层 遮罩 oci overflow 绝对定位 sel position
原文地址:http://www.cnblogs.com/zxcc/p/7424341.html