<div class="gallery">
  <img src="https://picsum.photos/id/1019/300/300" alt="A night sky">
  <img src="https://picsum.photos/id/1021/300/300" alt="Forest in the mist">
  <img src="https://picsum.photos/id/1022/300/300" alt="Green Aurora borealis">
  <img src="https://picsum.photos/id/1037/300/300" alt="A forest with a rising sun">
  <img src="https://picsum.photos/id/193/300/300" alt="a castle">
</div>

.gallery {
  --s: 200px; /* control the size */
  --g: 10px;  /* control the gap */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2,auto);
  position: relative;
  font-size: 0;
  transition: .5s;
  cursor: pointer;
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em),#000 calc(51% + var(--g)/2 + 1em));
}
.gallery > img:nth-child(1) {--_a:calc(100% + var(--g)/2) calc(100% + var(--g)/2)}
.gallery > img:nth-child(2) {--_a:calc(  0% - var(--g)/2) calc(100% + var(--g)/2)}
.gallery > img:nth-child(3) {--_a:calc(100% + var(--g)/2) calc(  0% - var(--g)/2)}
.gallery > img:nth-child(4) {--_a:calc(  0% - var(--g)/2) calc(  0% - var(--g)/2)}
.gallery > img:nth-child(5) {
  position: absolute;
  width: calc(var(--s) + 2em);
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

.gallery:hover {
  font-size: calc(var(--s)/5);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #CD8C52;
}