<div class="container">
	<img src="https://source.unsplash.com/random/600x600?water" alt="">
	<img src="https://source.unsplash.com/random/600x600?summer" alt="">
	<img src="https://source.unsplash.com/random/600x600?plants" alt="">
	<img src="https://source.unsplash.com/random/600x600?snow" alt="">
	<img src="https://source.unsplash.com/random/600x600?roses" alt="">
	<img src="https://source.unsplash.com/random/600x600?sky" alt="">
	<img src="https://source.unsplash.com/random/600x600?nature" alt="">
	<img src="https://source.unsplash.com/random/600x600?blossom" alt="">
	<img src="https://source.unsplash.com/random/600x600?ice" alt="">
	<img src="https://source.unsplash.com/random/600x600?spring" alt="">
</div>
html, body {
	height: 100%;
	font-size: 16px;
	line-height: 1.5;
	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
}

body {
	overflow: hidden;
	background-color: #222;
	display: flex;
	align-items: center;
}

.container {
	position: relative;
	flex-grow: 1;
	margin: auto;
	max-width: 1200px;
	max-height: 1200px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 2vmin;
	justify-items: center;
	align-items: center;
}

img {
	z-index: 1;
	grid-column: span 2;
	max-width: 100%;
	margin-bottom: -52%;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	transform: scale(1);
	transition: all .25s;
}

img:nth-child(7n + 1) {
	grid-column: 2 / span 2;
}

img:hover {
	z-index: 2;
	transform: scale(2);
}
// https://webdevtrick.com/css-rhombus-image-grid/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.