<!-- Grid Layout (thumbnail images have same dimensions) -->
<div class="thumbnails">
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?man" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?woman" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?design" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?sky" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?tree" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?cat" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?dog" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?office" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?sea" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?green" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?fashion" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?architecture" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?art" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?style" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?animal" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?home" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?flower" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?grass" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?market" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/500x300/?street" alt=""></a>
</div>
<br><br><br><br>
<!-- Masonry Layout (thumbnail images have random dimensions) -->
<div class="thumbnails">
<a href="#"><img src="https://source.unsplash.com/featured/?man" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?woman" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?design" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?sky" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?tree" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?cat" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?dog" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?office" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?sea" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?green" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?fashion" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?architecture" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?art" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?style" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?animal" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?home" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?flower" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?grass" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?market" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?street" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/featured/?bird" alt=""></a>
</div>
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
flex-grow: 1;
height: 200px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
min-width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.