鼠标放图片上，原图上划上去一个透明图片

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