body {
  background-color: #2A2D34;
  padding: 2em 0;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 400px;
}

.grid-item {
  height: 20%;
  width: 20%;
}
.grid-item:hover ~ img {
  height: 150%;
  width: 150%;
}
.grid-item:hover:nth-of-type(5n + 1) ~ img {
  left: 0px;
}
.grid-item:hover:nth-of-type(1n + 1) ~ .zoom-image {
  top: 0px;
}
.grid-item:hover:nth-of-type(5n + 2) ~ img {
  left: -50px;
}
.grid-item:hover:nth-of-type(1n + 6) ~ .zoom-image {
  top: -50px;
}
.grid-item:hover:nth-of-type(5n + 3) ~ img {
  left: -100px;
}
.grid-item:hover:nth-of-type(1n + 11) ~ .zoom-image {
  top: -100px;
}
.grid-item:hover:nth-of-type(5n + 4) ~ img {
  left: -150px;
}
.grid-item:hover:nth-of-type(1n + 16) ~ .zoom-image {
  top: -150px;
}
.grid-item:hover:nth-of-type(5n + 5) ~ img {
  left: -200px;
}
.grid-item:hover:nth-of-type(1n + 21) ~ .zoom-image {
  top: -200px;
}

.zoom-image {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}

.grid-item {
  background-color: rgba(48, 197, 255, 0.25);
}
.grid-item:nth-of-type(2n) {
  background-color: rgba(186, 59, 70, 0.25);
}

.grid-wrapper {
  margin: 0 auto;
}