figure.effect-apollo {
background: #3498db
}
figure.effect-apollo img {
opacity: .95;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale3d(1.05, 1.05, 1);
-ms-transform: scale3d(1.05, 1.05, 1);
transform: scale3d(1.05, 1.05, 1)
}
figure.effect-apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .5);
content: '';
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
-ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -102%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -102%, 0)
}
figure.effect-apollo .effect-description {
position: absolute;
right: 0;
bottom: 0;
margin: 3em !important;
padding: 0 1em;
max-width: 150px;
border-right: 4px solid #fff;
text-align: right;
font-size: 14px;
opacity: 0;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-apollo h2 {
text-align: left
}
figure.effect-apollo:hover img {
opacity: .6;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
figure.effect-apollo:hover figcaption::before {
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
-ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 102%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 102%, 0)
}
figure.effect-apollo:hover .effect-description {
opacity: 1;
-webkit-transition-delay: .1s;
transition-delay: .1s
}