@import "mixins.less";

.imagehover {
	position: relative;
	text-align: center;
	display: flex;
		flex-flow: row wrap;
	.j51flexgallery {
		-moz-box-flex: 0;
		display: inline-block;
		flex: 0 0 auto;
		position: relative;
		vertical-align: middle;
		box-sizing: border-box;
		*, *:before {
			.box-sizing(border-box);
			.transition (all 0.4s ease);
		}
	}
	figure {
		position: relative;
		overflow: hidden;
		width: 100%;
		text-align: center;
		margin: 0;
		
		&:before {
			background: red;
			position: absolute;
			content: ''; 
			.transition-delay(.3s);
			.transition (all 0.4s ease);
			top: 50%;
			bottom: 50%;
			left: 0;
			right: 0;
		}
		img {
			vertical-align: top;
			max-width: 100%;
			width:100%;
			display: block;
		}
		figcaption {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			padding: 15px;
			.fill(0px);
			z-index: 1;
			opacity: 0;
		}
		h3, p {
			width: 100%;
			opacity: 0;
		}
		h3 {
			font-size: 22px;
			line-height: 1em;
		}
		p {
			margin: 0;
		}
		i {
			position: absolute;
			top: 50%;
			left: 50%;
			font-size: 50px;
			.translate(-50%,0%);
			z-index: 99;
			opacity: 0;
			&:before {
				color: white;
			}
		}
		a {
			.fill;
			z-index: 1;
		}
		&:hover, &.hover {
			figcaption {
				opacity: 1;
			}
			h3, p {
				opacity: 1;
				.transition-delay(0.3s);
			}
			i {
				opacity: 1;
				.translate(-50%,-50%);
			}
			&:before {
				top: 0;
				bottom: 0;
			}
		}
	}
}