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

.gallery {
  --g: 8px;   /* the gap */
  --s: 400px; /* the size */

  display: grid;
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(var(--_x,0),var(--_y,0));
  cursor: pointer;
  font-size: 0;
  z-index: 0;
  transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
  font-size: var(--s);
  z-index: 1;
  transition: transform .2s, font-size .3s .2s, z-index 0s;
}
.gallery:hover img {
  transform: translate(0,0);
}
.gallery > img:nth-child(1) {
  clip-path: polygon(50% 50%,.5em 1.2em,0 1em,0 0,100% 0,100% 1em,calc(100% - .5em) 1.2em);
  --_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
  clip-path: polygon(50% 50%,calc(100% - 1.2em) 0.5em,calc(100% - 1em) 0,100% 0,100% 100%,calc(100% - 1em) 100%,calc(100% - 1.2em) calc(100% - .5em));
  --_x: var(--g)
}
.gallery > img:nth-child(3) {
  clip-path: polygon(50% 50%,calc(100% - .5em) calc(100% - 1.2em),100% calc(100% - 1.2em),100% 100%,0 100%,0 calc(100% - 1em),.5em calc(100% - 1.2em));
  --_y: var(--g)
}
.gallery > img:nth-child(4) {
  clip-path: polygon(50% 50%,1.2em .5em,1em 0,0 0,0 100%,1em 100%,1.2em calc(100% - .5em));
  --_x: calc(-1*var(--g))
}