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)
}