<div class="container">
  <div class="honeycomb ">
    <div class="hexes-1 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-2 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-3 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-4 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-5 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-6 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-7 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-8 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-9 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-10 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-11 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-12 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-13 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-14 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="hexes-13 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content">
          <strong>Hello!</strong>
          <small>i'm a hexagon</small>
        </span>
      </a>
    </div>
    <div class="shadows"></div>
  </div>
</div>
@import "compass/css3";

body {
  background-color: #171d25;
}
.container {
  position: relative;
  @include transition(all .3s ease-out);
  height: 500px;
  @include perspective(700px);
  z-index: 10;
  overflow: hidden;
  
  .honeycomb {
    display: block;
    position: absolute;
    margin-left: -465px;
    padding-left: 18px;
    left: 50%;
    text-align: center;
    height: 450px;
    width: 930px;
    @include transform(rotateX(45deg) rotateY(0deg));
    @include transform-style(preserve-3d);
    @include transform-origin( center, 65%);
    z-index: 5;
    
    .column {
      display: block;
      float: left;
      width: 62px;
      transform-style: preserve-3d;
      &:nth-child(odd) {
        margin-top: 36px;
      }
    }
    
    .hex {
      display: block;
      position: relative;
      float: left;
      margin: 0;
      height: 72px;
      width: 62px;
      color: #fff;
      cursor: pointer;
      text-decoration: none;
      @include transform-style(preserve-3d);
      @include transition(all .3s ease-out);
      @include opacity(0.5);
      &:hover {
        opacity: 1;
        @include transform(translateZ(20px));
        @include transition-duration(200ms);
        .content {
          @include opacity(1);
          @include transform(rotateX(-90deg) translateZ(-40px) translateY(-50px));
        }
      }
      .wrapper {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        .color-1 {
          background: #ffbc06;
          &:before {
            border-right-color: #ffbc06;
          }
          &:after {
            border-left-color: #ffbc06;
          }
        }
      }
      .content {
        display: block;
        position: absolute;
        top: 0;
        left: -80px;
        text-align: center;
        width: 200px;
        @include opacity(0);
        @include transition(all .3s ease-out .1s);
        @include transform(rotateX(-90deg) translateZ(-40px) translateY(-40px));
        pointer-events: none;
        -webkit-font-smoothing: antialiased;
        strong {
          display: block;
          font: 600 26px/1.1 verdana,sans-serif;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-shadow: -1px -1px 2px rgba(0,0,0,0.8);
        }
        small {
          display: block; 
          font: 15px/1.1 verdana,sans-serif;
        }
      }
    }

    .shadows {
      display: block;
      position: absolute;
      top: -15%;
      left: -15%;
      height: 130%;
      width: 130%;
      @include background-image(radial-gradient(closest-side, rgba(23,29,37,0), #171d25));
      @include opacity(0.9);
      @include transform(translateZ(10px));
      pointer-events: none;
    }
  }
}

.hexagon {
  display: block;
  position: absolute;
  width: 36px; 
  height: 62px;
  background-color: #ffffff;
  &:before,
  &:after {
    content: "";
    position: relative;
    float: left;
    border-top: 31px solid transparent;
    border-bottom: 31px solid transparent;
  }
  &:before {
    border-right: 18px solid #ffffff;
    left: -18px;
  }
  &:after {
    border-left: 18px solid #ffffff;
    right: -18px;
  }
}

.hidden {
  display: none;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.