CodePen Embed - Hexagon Grid w/ Hover

<div class="hex-container">
  <div class="hex-grid">
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/eddie.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media2.giphy.com/media/11i7RuOORxP7iM/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/ralph.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media3.giphy.com/media/3KWHzadf2Iq64/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/paul.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media3.giphy.com/media/PG7Xa4B58XhqE/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
  </div>
  <div class="hex-grid">
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/mike.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media0.giphy.com/media/PC3PhzppXcK5y/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/brandi.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media0.giphy.com/media/j9bRkg7HJiDMA/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
  </div>
  <div class="hex-grid">
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/caitlyn.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media2.giphy.com/media/AXJxMvKjJsKMo/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/chris.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media.giphy.com/media/Y1LlFX97M150k/giphy-tumblr.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/dylan.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media4.giphy.com/media/ziauh5HAPzVhC/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
  </div>
  <div class="hex-grid">
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/francis.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media2.giphy.com/media/QupZ48l99NAKA/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/gavin.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media2.giphy.com/media/X50rBGldq5YB2/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
  </div>
  <div class="hex-grid">
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jereme.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media0.giphy.com/media/qJrFbfOeLuRNe/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/john.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media4.giphy.com/media/NDw25ETINa1ck/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jordan-m.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media.giphy.com/media/zAYZOtH5OMhuU/giphy-tumblr.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
  </div>
  <div class="hex-grid">
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jordan.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media0.giphy.com/media/1237EvS8dYtWIU/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    <a href="#" class="-hex">
      <div class="-hex-wrap">
        <div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/josh.jpg);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
        <div class="-card -back" style="background-image: url(http://media0.giphy.com/media/Y8hzdgPnZ6Hwk/giphy.gif);">
          <div class="-inner">
            <h3>Title</h3>
            <p>description</p>
          </div>
          <div class="-clip -left"></div>
          <div class="-clip -right"></div>
        </div>
      </div>
    </a>
    
  </div>
</div>

$white: #fff;
@mixin mq($width: 0) {
  @media ( min-width: + $width ) {
    @content;
  }
}

@mixin hex-size($height, $grid_width, $margin, $gutter, $translate) {
  width: $grid_width;
  margin: #{$margin};

  &.-gutter{
    margin: #{$gutter};
  }

  .-hex-wrap{
    height: $height/2;
  }
  .-card{
    background-size: auto $height;
    height: $height/2;
    width: $grid_width;
  }
  .-clip{
    &:before{
      height: $height;
      width: $height;
    }
    &.-left{
      &:before{
        transform: rotate(-60deg) translate(-$height/2,0);
      }
    }
    &.-right{
      &:before{
        transform: rotate(60deg) translate(#{$translate});
      }
    }
  }
}

@mixin hex-small() {
  $height: 300px;
  $width: $height;
  $grid_width: 260px;

  @include hex-size(220px, 190px, '27px 0 27px 0', '33px 6px 33px', '40px,40px');
}
@mixin hex-medium() {
  $height: 300px;
  $width: $height;
  $grid_width: 260px;

  @include hex-size(300px, 260px, '37px 0 38px 0', '47px 10px 47px', '55px,55px');
}
@mixin hex-large() {
  $height: 380px;
  $width: $height;
  $grid_width: 330px;

  @include hex-size(380px, 330px, '48px 0 48px 0', '57px 10px 57px', '70px,69px');
}

.hex-container{
  position: relative;
  margin-top: 55px;
  margin-bottom: 55px;
}
.hex-grid{
  text-align: center;
  // margin-top: 55px;
  // margin-bottom: 55px;
  font-size: 0px;
  word-spacing: 0;

  a.-hex,
  div.-hex{
    // width: $grid_width;
    // margin: 37px 0 38px 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 10;
    perspective: 800px;

    @include hex-small();

    @include mq(900px) {
      @include hex-medium();
    }
    @include mq(1080px) {
      @include hex-large();
    }
    

    // &.-gutter{
    //  margin: 57px 10px 57px;
    // }

    .-hex-wrap{
      position: relative;
      // height: $height/2;
      width: 100%;
      transition: all 400ms ease-out;
      transform-style: preserve-3d;
    }
    .-card{
      // background-size: auto $height;
      // height: $height/2;
      transition: none 1s;
      // background-color: purple;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      text-align: center;
      display: block;
      // width: $grid_width;
      position: absolute;
      top: 0;
      text-align: center;
      backface-visibility: hidden;

      &.-front{
        // background-image: url(../img/test-bio.jpg);
        z-index: 10;
      }
      &.-back{
        background-image: url(https://33.media.tumblr.com/95c5f652c652f154cf5578482012474a/tumblr_nj5wbzJQ5A1tcuj64o1_400.gif);
        transform: rotateY(-180deg);
        z-index: 9;
      }
    }
    .-inner{
      width: 100%;
      padding: 0 1rem;
      margin: 0 auto;
      position: absolute;
      bottom: 0;
      z-index: 5;
      h3,
      p{
        display: block;
        color: $white;
      }
      p{
        margin: 0;
        font-weight: 300;
      }
    }
    .-clip{
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
      background: inherit;
      backface-visibility: hidden;

      &:before{
        // height: $height;
        // width: $width;
        content: '';
        position: absolute;
        left: 0;
        background: inherit;
      }

      &.-left{
        z-index: -1;
        transform: rotate(60deg);

        &:before{
          // @include transform(rotate(-60deg) translate(-$height/2,0));
          transform-origin: 0 0;
        }
      }
      &.-right{
        z-index: -2;
        transform: rotate(-60deg);

        &:before{
          bottom: 0;
          // @include transform(rotate(60deg) translate(70px,69px));
          transform-origin: 50% 50%;
        }
      }
    }
  }

  a.-hex{
    &:hover{
      .-hex-wrap{
        transform: rotateY(180deg);
      }
    }
  }
}

View Compiled

This Pen is owned by John Heiner on CodePen.

See more by @johnheiner on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.