/*
https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
*/
/* Common style */
figure {
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
}

figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	width:100%;
}

figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}

figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:500;
}

/* Individual effects */

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 100%;
	background: rgba(255,255,255,0.5);
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

@media screen and (max-width: 50em) {
	figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}