<!-- 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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.