Im heutigen Video möchte ich euch zeigen wie ihr euch auch ein schönes Grid Menu erstellen könnt in der Form eines Hexagons. Hier lernt man nicht nur wie man eine Form mit einer Clip-Path Maske anpasst sondern es auch noch schön designt und animiert.

Video

HTML

<div class="container">
      <div class="hexagonbereich zeile1">
        <div class="hexagon">
          <img src="icon/haus.png" />
          <h3>Haus1</h3>
        </div>
        <div class="hexagon">
          <img src="icon/herz.png" />
          <h3>Herz</h3>
        </div>
        <div class="hexagon">
          <img src="icon/tel.png" />
          <h3>Tel</h3>
        </div>
        <div class="hexagon">
          <img src="icon/smiley.png" />
          <h3>Smiley</h3>
        </div>
      </div>
      <div class="hexagonbereich zeile2">
        <div class="hexagon">
          <img src="icon/hand.png" />
          <h3>Hand</h3>
        </div>
        <div class="hexagon">
          <img src="icon/auge.png" />
          <h3>Auge</h3>
        </div>
        <div class="hexagon">
          <img src="icon/auto.png" />
          <h3>Auto</h3>
        </div>
      </div>
    </div>

CSS

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.container .hexagonbereich {
  display: flex;
}

img {
  width: 100px;
  height: auto;
}

h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.container .hexagonbereich .hexagon {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 10px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--dunkelblau);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  transition: 500ms;
}

.container .hexagonbereich.zeile2 {
  transform: translateY(-25px);
}

.container .hexagonbereich .hexagon:hover {
  background: var(--rot);
  transform: scale(0.9);
}