hovertile/Kira/Kira.css

A port of Mary Lou's hover tiles to React

figure.kira {
	background: #fff;
	text-align: left;
}

figure.kira img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.kira figcaption {
	z-index: 1;
}

figure.kira .hoverContent {
	padding: 2.25em 0.5em;
	font-weight: 600;	
	font-size: 100%;
	line-height: 1.5;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.kira .hoverContent a {
	margin: 0 0.5em;
	color: #101010;
}

figure.kira .hoverContent a:hover,
figure.kira .hoverContent a:focus {
	opacity: 0.6;
}

figure.kira figcaption::before {
	position: absolute;
	top: 0;
	right: 2em;
	left: 2em;
	z-index: -1;
	height: 3.5em;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,4em,0) scale3d(1,0.023,1);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.kira:hover img {
	opacity: 0.5;
}

figure.kira:hover .hoverContent {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.kira:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
	transform: translate3d(0,5em,0) scale3d(1,1,1);
}