<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/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.