figure.effect-layla {
background: #18a367
}
figure.effect-layla figcaption {
padding: 3em
}
figure.effect-layla figcaption::after,
figure.effect-layla figcaption::before {
position: absolute;
content: '';
opacity: 0
}
figure.effect-layla figcaption::before {
top: 10%;
right: 6%;
bottom: 10%;
left: 6%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0
}
figure.effect-layla figcaption::after {
top: 6%;
right: 10%;
bottom: 6%;
left: 10%;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0
}
figure.effect-layla h2 {
padding-top: 26%;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s
}
figure.effect-layla .effect-description {
padding: .5em 2em;
text-transform: none;
opacity: 0;
-webkit-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
figure.effect-layla h2,
figure.effect-layla img {
-webkit-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
figure.effect-layla figcaption::after,
figure.effect-layla figcaption::before,
figure.effect-layla img,
figure.effect-layla .effect-description {
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
figure.effect-layla:hover img {
opacity: .7;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover figcaption::before {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
figure.effect-layla:hover h2,
figure.effect-layla:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover img,
figure.effect-layla:hover .effect-description {
-webkit-transition-delay: .15s;
transition-delay: .15s
}