body,figure,figcaption,h1,p{

margin:0;

padding: 0;

}

figcaption{

position:absolute;

top: 0px;

left: 0px;

color:#fff;

}

figure{

position:relative;

float:left;

width:33.333%;

}

figure img{

opacity: 0.8;

transition: all 0.35s;

}

figure figcaption p,h1,span,div{

transition: all 0.35s;

}

@media screen and(max-width:600px) {

figure{width:100%;}

}

@media screen and (min-width:601px) and (max-width: 1000px) {

figure{width:50%;}

}

@media screen and (min-width: 1001px){

figure{width:33.3333%;}

}

.test1{

background:#2f0000;

}

.test1 figcaption p{

background:#fff;

color: #ddd;

margin: 3px;

text-align: center;

padding:0 10px;

transform: translate(-120px,0px);

}

.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 figcaption{

padding: 20px;

}

.test1:hover figcaption p{

transform: translate(0px,0px);

}

.test1:hover img{

transform: translate(-50px,0px);opacity: 0.5;

}

.test2{

background:#030;

}

.test2 figcaption {

width: 100%;

height:100%;

}

.test2 figcaption h2{

margin-top:15%;

}

.test2 figcaption div{

border:2px solid #fff;

width: 80%;

height:80%;

position: absolute;

top: 10%;

left: 10%;}

在父元素沒有設置邊框的情況下 設置子元素的margin值不是會導致margin值得堆疊的，也就是設置了margin值是沒有作用的