<div class="box">       <div class="box1"></div>       <div class="box2"></div>    </div>

.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;}