figure.effect-milo {
background: #2e5d5a
}
figure.effect-milo img {
opacity: 1;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
-ms-transform: translate3d(-30px, 0, 0) scale(1.12);
transform: translate3d(-30px, 0, 0) scale(1.12);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden
}
figure.effect-milo:hover img {
opacity: .5;
-webkit-transform: translate3d(0, 0, 0) scale(1);
-ms-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1)
}
figure.effect-milo h2 {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em
}
figure.effect-milo .effect-description {
padding: 0 10px 0 0;
width: 50%;
border-right: 1px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-40px, 0, 0);
-ms-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0)
}
figure.effect-milo:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}