<div class="gallery">
  <img src="https://picsum.photos/id/25/500/500" alt="small trees">
  <img src="https://picsum.photos/id/454/500/500" alt="a girl with a camera">
  <img src="https://picsum.photos/id/222/600/600" alt="the sky">
  <img src="https://picsum.photos/id/152/500/500" alt="some purple flowers">
  <img src="https://picsum.photos/id/564/800/400" alt="a canyon">
</div>
.gallery {
  display: grid;
  width: min(800px,100%); /* control the size here */
  margin: 50px auto;
  grid: 3fr 1fr 2fr 2fr/1fr 1fr 2fr 3fr 5fr; 
  aspect-ratio: 3/2;
}
.gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(30%);
  transition: .3s;
}
.gallery:hover img {
  filter: grayscale()
}
.gallery img:hover {
  filter: grayscale(0%)
}
.gallery img:nth-child(1) {
  grid-area: 1/1/span 2/span 3;
  clip-path: polygon(0 0,100% 0,0 100%);
  z-index: 1;
}
.gallery img:nth-child(2) {
  grid-area: 1/2/span 3/span 3;
}
.gallery img:nth-child(3) {
  grid-area: 1/span 2/-1/-1;
  clip-path: polygon(0 0,100% 0,100% 100%);
}
.gallery img:nth-child(4) {
  grid-area: span 3/1/-1/span 3;
  clip-path: polygon(0 -20%,150% 100%,0 100%);
}
.gallery img:nth-child(5) {
  grid-area: span 3/span 3/-1/-1;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}

body {
  background: #E3AAD6;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.