figure.effect-romeo {
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px
}
figure.effect-romeo img {
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(0, 0, 300px);
-ms-transform: translate3d(0, 0, 300px);
transform: translate3d(0, 0, 300px)
}
figure.effect-romeo:hover img {
opacity: .6;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-romeo figcaption::after,
figure.effect-romeo figcaption::before {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #fff;
content: '';
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0)
}
figure.effect-romeo:hover figcaption::before {
opacity: .5;
-webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
-ms-transform: translate3d(-50%, -50%, 0) rotate(45deg);
transform: translate3d(-50%, -50%, 0) rotate(45deg)
}
figure.effect-romeo:hover figcaption::after {
opacity: .5;
-webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-ms-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
transform: translate3d(-50%, -50%, 0) rotate(-45deg)
}
figure.effect-romeo h2,
figure.effect-romeo .effect-description {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s
}
figure.effect-romeo h2 {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
-ms-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0)
}
figure.effect-romeo .effect-description {
padding: .25em 2em;
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
-ms-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0)
}
figure.effect-romeo:hover h2 {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0)
}
figure.effect-romeo:hover .effect-description {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
-ms-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0)
}