hovertile
Version:
A port of Mary Lou's hover tiles to React
66 lines (58 loc) • 1.22 kB
CSS
figure.chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
figure.chico:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.chico figcaption {
padding: 3em;
}
figure.chico figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.chico figcaption::before,
figure.chico .hoverContent {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.chico .content {
padding: 20% 0 20px 0;
}
figure.chico .hoverContent {
margin: 0 auto;
max-width: 200px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
figure.chico:hover figcaption::before,
figure.chico:hover .hoverContent {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}