html:
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
css(引入重置文件后的css):
.box{height: 100px;width: 200px;background-color: pink;position:relative;overflow-y:hidden;}
.box1{background-color: red;width: 100px;height: 100px;}
.box2{background-color: yellow;width: 100px;height: 100px;opacity: 0.4;transition: all 0.8s ease;-moz-transition: all 0.8s ease; -webkit-transition: all 0.8s ease;-o-transition: all 0.8s ease;position: absolute;top:100px;}
.box:hover .box2{position: absolute;top:0;}