figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 75%);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .8)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0);
-ms-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0)
}
figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform .35s, color .35s;
transition: transform .35s, color .35s;
-webkit-transform: translate3d(0, -50%, 0);
-ms-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
figure.effect-sadie figcaption::before,
figure.effect-sadie .effect-description {
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
figure.effect-sadie .effect-description {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
-ms-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0)
}
figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}