HTML
<!doctype html>
<html>
<body>
<div>
<h1>Flexbox Grid with Hover Effects in Pure CSS</h1>
<div class="thumbnail-grid flex">
<a href="https://sinfonietta-meridiana.de/" class="flex-item">
<figure class="i1">
<figcaption>Project #1</figcaption>
</figure>
</a>
<a href="https://pension-am-alten-waschhaus.de/en/" class="flex-item">
<figure class="i2">
<figcaption>Project #2</figcaption>
</figure>
</a>
<a href="#!" class="flex-item">
<figure class="i3">
<figcaption>Project #3</figcaption>
</figure>
</a>
</div>
<p>Feel free to use this code.<br>If you have any suggestions, please leave a comment.</p>
</div>
</body>
</html>
CSS
.thumbnail-grid {
user-select: none
}
.thumbnail-grid figure {
position: relative;
min-width: 200px;
height: 150px;
margin: 5px;
border-radius: 3px;
box-shadow: inset 0 -40px 0 0 rgba(0,0,0,.1);
transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover {
box-shadow: inset 0 -150px 0 0 rgba(0,0,0,.5)
}
.thumbnail-grid figcaption {
position: absolute;
width: 100%;
text-align: center;
color: #f4f4f4;
text-shadow: 0 0 3px #000;
bottom: 10px;
transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover figcaption {
bottom: 60px
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
align-content: stretch
}
.flex-item {
flex: 1 0 auto
}
/* DEMO STYLING */
* {
box-sizing: border-box;
}
html {
height: 100%;
font-size: 62.5%;
}
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.8rem;
background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
}
a {
color: #333;
text-decoration: none;
}
h1 {
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
/* Thumbnails, just for demo purposes */
.thumbnail-grid figure.i1 {
background: url(https://anselmurban.de/codepen-img/sinfonietta-meridiana.png) no-repeat center;
background-size: cover
}
.thumbnail-grid figure.i2 {
background: url(https://anselmurban.de/codepen-img/pension.png) no-repeat center;
background-size: cover
}
.thumbnail-grid figure.i3 {
background: url(https://anselmurban.de/codepen-img/goerlitzmade.png) no-repeat center;
background-size: cover
}
/* Thumbnails for HiDPI/retina screens */
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.thumbnail-grid figure.i1 {
background-image: url(https://anselmurban.de/codepen-img/sinfonietta-meridiana%402x.png)
}
.thumbnail-grid figure.i2 {
background-image: url(https://anselmurban.de/codepen-img/pension%402x.png)
}
.thumbnail-grid figure.i3 {
background-image: url(https://anselmurban.de/codepen-img/goerlitzmade%402x.png)
}
}
