鼠标放在图片上，图片滑动进入

http://www.alixixi.com/web/a/2014031192662.shtml

 

1. 外容器BOX的Height为200px，Width为200px；

.box1{
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

2. 内容器BORDER的Height为200%，Width为100%，Top为-100%；

.border1{
   position: absolute;
   top: -100%;
   left: 0px;
   width: 100%;
   height: 200%;
   -webkit-transform: translateY(0px);   
   transform: translateY(0px);
   -webkit-transition:1s all ease;
   transition:1s all ease;
 }

3. 需要显示的2个元素，Height为50%，Width为100%；

  .front1{
    width: 100%;
    height: 50%;
    background: #ff0000;
  }
  
  .back1{
    width: 100%;
    height: 50%;
   background: #00ff00;
 }


4. 加入鼠标移入效果，鼠标移入后内容器BORDER向下移动50%，就将滑动内容BACK显示出来，将原内容FRONT滑动隐藏；


 .box1:hover .border1{
   -webkit-transform: translateY(50%);   
   transform: translateY(50%);
   -webkit-transition:1s all ease;
   transition:1s all ease;
 }

5. 页面内容


 <div class="box1">
   <div class="border1">
     <div class="back1">back</div>
     <div class="front1">front</div>
   </div>
 </div>