figure.effect-basic-up figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}
figure.effect-basic-up h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
figure.effect-basic-up figcaption::before,
figure.effect-basic-up p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-basic-up p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-basic-up:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-basic-up:hover figcaption::before ,
figure.effect-basic-up:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-square-small p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
padding: 30px;
border: 2px solid #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
}
figure.effect-square-small h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
figure.effect-square-small:hover h2 {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
figure.effect-square-small:hover p {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
figure.effect-fat-side figcaption {
text-align: left;
}
figure.effect-fat-side h2 {
position: relative;
padding: 0.5em 0;
}
figure.effect-fat-side p {
display: inline-block;
margin: 0 0 0.25em;
padding: 0.4em 1em;
background: rgba(255, 255, 255, 0.9);
color: #2f3238 !important;
text-transform: none;
font-weight: 500;
font-size: 75%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-360px, 0, 0);
transform: translate3d(-360px, 0, 0);
}
figure.effect-fat-side:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}