main.css

*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;  /* Center vertical */
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 30px;
  background-image: radial-gradient(circle, rgb(170, 175, 190), rgb(120, 130, 145));
}

.hexagon-nav {
  width: 180px;  /* One column */
  margin: 0 auto;  /* Center horizontal */
}

.hexagon-nav .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hexagon-nav .nav:after {
  /* Clear fix */
  content: "";
  display: table;
  clear: both;
}

.hexagon-nav .nav li {
  position: relative;
  float: left;
  width: 180px;
  height: 156px;
  margin-top: -2px;
  margin-right: -1.73px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);  /* Hexagon */
  transition: all 0.12s ease-out;
}

.hexagon-nav .nav li:before {
  /* Hexagon overlay */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: inherit;
}

.hexagon-nav .nav li:after {
  /* Hexagon border */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(
      /* Outer hexagon, clockwise */
      25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%,
      /* First point of outer hexagon */
      25% 0,
      /* Inner hexagon, counter-clockwise */
      26% 1.73%, 1% 50%, 26% 98.27%, 74% 98.27%, 99% 50%, 74% 1.73%,
      /* First point of inner hexagon */
      26% 1.73%);
  transition: inherit;
}

.hexagon-nav .nav li a {
  position: relative;
  display: flex;
  align-items: center;  /* Center vertical */
  justify-content: center;  /* Center horizontal, short text */
  text-align: center;  /* Center horizontal, long text */
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.hexagon-nav .nav li .text {
  margin: 0;
  color: #fff;
  font: bold 18px sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hexagon-nav .nav li .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  opacity: 0;
  transition: inherit;
}

.hexagon-nav .nav li:hover:before {
  background-color: rgba(199, 25, 31, 0.88);  /* Red */
}

.hexagon-nav .nav li.no-image:hover:before {
  background-color: rgb(199, 25, 31);  /* Red */
}

.hexagon-nav .nav li:hover:after {
  background-color: rgba(0, 0, 0, 0);
}

.hexagon-nav .nav li:hover .bg {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 375px) {
  .hexagon-nav {
    width: 315px;  /* Two columns */
  }

  .hexagon-nav .nav li:nth-last-child(n+2) {
    margin-bottom: -78px;
  }

  .hexagon-nav .nav li:nth-child(2n) {
    margin-left: 135px;
  }
}

@media (min-width: 510px) {
  .hexagon-nav {
    width: 450px;  /* Three columns */
  }

  .hexagon-nav .nav li:nth-child(3n+1) {
    margin-left: 0;
  }

  .hexagon-nav .nav li:nth-child(3n+2) {
    margin-left: 90px;
  }

  .hexagon-nav .nav li:nth-child(3n) {
    margin-left: 135px;
  }
}

@media (min-width: 645px) {
  .hexagon-nav {
    width: 585px;  /* Four columns */
  }

  .hexagon-nav .nav li:nth-child(4n+1) {
    margin-left: 0;
  }

  .hexagon-nav .nav li:nth-child(2n) {
    margin-left: 90px;
  }

  .hexagon-nav .nav li:nth-child(4n+3) {
    margin-left: 135px;
  }
}

@media (min-width: 780px) {
  .hexagon-nav {
    width: 720px;  /* Five columns */
  }

  .hexagon-nav .nav li:nth-child(5n+1) {
    margin-left: 0;
  }

  .hexagon-nav .nav li:nth-child(5n+2) {
    margin-left: 90px;
  }

  .hexagon-nav .nav li:nth-child(5n+3) {
    margin-left: 90px;
  }

  .hexagon-nav .nav li:nth-child(5n+4) {
    margin-left: 135px;
  }

  .hexagon-nav .nav li:nth-child(5n) {
    margin-left: 90px;
  }
}

.grow {
  transform: scale(1.2);
}

.up {
    transform: translateY(-30px);
}

.right {
    transform: translateX(30px);
}

.down {
    transform: translateY(30px);
}

.left {
    transform: translateX(-30px);
}

.up.right {
    transform: translate(30px, -30px);
}

.down.right {
    transform: translate(30px, 30px);
}

.down.left {
    transform: translate(-30px, 30px);
}

.up.left {
    transform: translate(-30px, -30px);
}