figure.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0, #05abe0 100%)
}
figure.effect-roxy img {
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-50px, 0, 0);
-ms-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0)
}
figure.effect-roxy figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-20px, 0, 0);
-ms-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
div.subtle-effect figure.effect-roxy figcaption {
padding: 3em;
text-align: left
}
figure.effect-roxy h2 {
padding: 30% 0 10px
}
figure.effect-roxy .effect-description {
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
figure.effect-roxy:hover img {
opacity: .7;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}