figure.effect-roxy {
	background: -webkit-linear-gradient(45deg, #ff89e9 0, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0, #05abe0 100%)
}

figure.effect-roxy img {
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	transition: opacity .35s, transform .35s;
	-webkit-transform: translate3d(-50px, 0, 0);
	-ms-transform: translate3d(-50px, 0, 0);
	transform: translate3d(-50px, 0, 0)
}

figure.effect-roxy figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	transition: opacity .35s, transform .35s;
	-webkit-transform: translate3d(-20px, 0, 0);
	-ms-transform: translate3d(-20px, 0, 0);
	transform: translate3d(-20px, 0, 0)
}

div.subtle-effect figure.effect-roxy figcaption {
	padding: 3em;
	text-align: left
}

figure.effect-roxy h2 {
	padding: 30% 0 10px
}

figure.effect-roxy .effect-description {
	opacity: 0;
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	transition: opacity .35s, transform .35s;
	-webkit-transform: translate3d(-10px, 0, 0);
	-ms-transform: translate3d(-10px, 0, 0);
	transform: translate3d(-10px, 0, 0)
}

figure.effect-roxy:hover img {
	opacity: .7;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover .effect-description {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}