body,figure,figcaption,h2,p,img{
   margin:0;
   padding:0;            
   }
figure {
   position: relative;
   width:33%;
   height: 350px;
   overflow: hidden;
   float: left;
}
figure img {opacity: 0.8} /**/
figure figcaption  {
   position: absolute;
   left: 0px;;
   top: 0px;
   font-family: "微软雅黑 Light";
   color: #ffffff;

}
.test1 figcaption p {
   background-color: #fff;
   color:#333;
   margin:5px;
   test-align:center;
}
.test1 {
   background-color: #22bbff;/**/
}
.test1 figcaption{
   padding:20px;
}
.test1 figcaption p{
   transform: translate(-150px,0);
   -webkit-transition: all .6s;
   -moz-transition:all .6s;
   -ms-transition: all .6s;
   -o-transition:all .6s;
   transition: all .6s;
}
.test1 figcaption p:nth-of-type(1){
   transition-delay: 0.05s;
}

.test1 figcaption p:nth-of-type(2){
   transition-delay:0.1s;
}

.test1 figcaption p:nth-of-type(3){
   transition-delay: 0.15s;
}
.test1:hover figcaption p {
   transform: translate(0,0);
}


.test2 img {
   transform: translate(-180px,0);

}
.test2 figcaption{
   /*padding:20px;*/
   with:100%;
   height:100%;
}

.test2 figcaption div {
   border:2px solid #fff;
   width: 70%;      
   height:65%;
   position: absolute;
   top: 45px;
   left: 55px;
}