hovertile/Phoebe/Phoebe.css

A port of Mary Lou's hover tiles to React

figure.phoebe {
	background: #675983;
}

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

figure.phoebe:hover img {
	opacity: 0.6;
}

figure.phoebe figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(./triangle2.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(5,2.5,1);
	transform: scale3d(5,2.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.phoebe:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.phoebe .content {
	margin-top: 1em;
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.phoebe:hover .content {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.phoebe .hoverContent > * {
	color: #fff;
	font-size: 140%;
	opacity: 0;
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.phoebe .hoverContent > *:first-child {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.phoebe .hoverContent > *:nth-child(2) {
	-webkit-transform: translate3d(0,60px,0);
	transform: translate3d(0,60px,0);
}

figure.phoebe .hoverContent > *:nth-child(3) {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

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