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.效果
原文：http://www.cnblogs.com/zxcc/p/7424341.html