一只废喵
figure{
width: 33.33%;
height: 350px;
position:relative;
overflow: hidden;
float: left;
}
figcaption{
width: 100%;
height: 100%;
color: #FFFCE7;
position: absolute;
top: 0;
left: 0;
}
figure p{
margin-top: 10px;
line-height: 30px;
width: 150px;
text-align: center;
}
figure h2,p,img,div,img{
transition: all 0.5s;
}
figure img{
opacity: 0.8;
}
.test1 figcaption{
padding: 20px;
}
.test1 figcaption p{
transform: translateX(-250px);
background: rgba(0,0,0,0.5);
text-align: center;
margin-top: 10%;
margin-left: 10%;
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.05s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay:0.1s;
}
.test1:hover figcaption p{
transform: translateX(0px);
}
.test1:hover img{
transform: translateX(-50px);
opacity: 0.5;
}
.test1{
background: #2f0000;
}
.test2 figcaption h2,p{
margin-top: 10%;
margin-left: 10%;
}
.test2 figcaption > div{
width: 80%;
height: 80%;
border: 1px solid #FFF;
position: absolute;
top: 10%;
left: 10%;
transform: translate(-150px,-350px) rotate(0deg);
}
.test2 figcaption p{
transform: translateX(-350px) rotate(0deg);
}
.test2:hover figcaption div{
transform: translate(0px,0px) rotate(180deg);
}
.test2:hover figcaption p{
transform: translate(0px,0px) rotate(360deg);
}
.test2:hover img{
transform: translateX(-100px);
opacity: 0.5;
}
.test3 figcaption{
top: 15%;
left: 20%;
}
.test3 figcaption p{
background: rgba(255,255,255,0.3);
transform: skew(90deg);
}
.test3:hover figcaption p{
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(1){
transition-delay:0.1s ;
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(2){
transition-delay:0.2s ;
transform: skew(0deg);
}
.test3:hover figcaption p:nth-of-type(3){
transition-delay:0.3s ;
transform: skew(0deg);
}
.test4 figcaption{
width: 100%;
height: 100%;
}
.test4 figcaption > div{
width: 80%;
height: 80%;
border: 1px solid #FFF;
position: absolute;
top: 10%;
left: 10%;
transform: scale(1.3,1.3);
opacity: 0;
}
.test4 figcaption h2{
margin-top: 15%;
margin-left: 15%;
}
.test4 figcaption p{
margin-left: 15%;
margin-top: 10px;
transform: translateY(40px);
opacity: 0;
}
.test4 img{
transform: scale(1,1);
}
.test4:hover img{
transform: scale(1.2,1.2);
opacity: 0.5;
}
.test4:hover figcaption div{
transform: scale(1,1);
opacity: 1;
}
.test4:hover figcaption p{
transform: translateY(0px);
opacity: 1;
}
.test5 figcaption{
width: 100%;
}
.test5 figcaption h2,p{
margin-top: 20%;
margin-left: 30%;
}
.test5 figcaption h2{
opacity: 0;
transform: translateY(-50px);
}
.test5 figcaption p{
opacity: 0;
transform: translateY(50px);
}
.test5:hover figcaption h2{
opacity: 1;
transform: translateY(0px);
}
.test5:hover figcaption p{
opacity: 1;
transform: translateY(0px);
}
.test6 figcaption h2{
margin-top: 50%;
margin-left: 20%;
opacity: 0;
}
.test6 figcaption div{
background: rgba(0,0,0,0.8);
width: 120%;
height: 100%;
transform-origin:0 0;
position: absolute;
bottom: -350px;
}
.test6:hover figcaption div{
transform: rotate(-15deg);
}
.test6:hover figcaption h2{
transform: translateY(-100px);
opacity: 1;
}