<div class="wrap">
    <div class="clip-block">
      <div class="clip-each clip-solid">
      <div class="social-share-block">
        <span class="social-each"><strong>10</strong>
        </span> <span>&hearts;</span>
      </div>
      </div>  
    </div> <!-- /clip-block -->

    <div class="clip-block">
      <a href="#" class="clip-each clip-gradient">
        <div class="clip-caption">work</div>
      </a>  
      <a href="#" class="clip-each clip-border">
        <div class="clip-caption">life</div>
      </a>  
    </div> <!-- /clip-block -->

    <div class="clip-block">
      <a href="#" class="clip-tagline">balance</a>
    </div> <!-- /clip-block -->
    <svg class="clip-svg">
      <defs>
        <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
          <polygon points="0.25 0.05, 0.75 0.05, 1 0.5, 0.75 0.95, 0.25 0.95, 0 0.5" />
        </clipPath>
      </defs>
    </svg>  

    <svg class="clip-svg">
      <defs>
        <clipPath id="triangle-clip" clipPathUnits="objectBoundingBox">
          <polygon points="1 0.03, 0.17 1, 1 1" />
        </clipPath>
      </defs>
    </svg>  
  </div> <!-- /wrap -->

body {
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.5;
  background: url("https://karenmenezes.com/static/img/demos/shapes-polygon/bg-cubes.png");
}

p {
  margin: 0 0 10px 0;
}

.wrap {
  color: #222;
  font-size: 24px;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-caption {
  width: 100%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.clip-each {
  display: block;
  position: relative;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  -webkit-clip-path: url("#hexagon-clip");
  clip-path: url("#hexagon-clip");
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 0 auto;
}

a.clip-each:hover {
  background: #9E566E;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.clip-solid {
  width: 300px;
  height: 300px;
  background-image: url("https://karenmenezes.com/static/img/demos/shapes-polygon/c.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #ad6996;
  background-blend-mode: hard-light;
  -webkit-transition: all 2.5s linear;
  transition: all 2.5s linear;
}

.clip-solid:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-clip-path: polygon(100% 3%, 17% 100%, 100% 100%);
  clip-path: polygon(100% 3%, 17% 100%, 100% 100%);
  -webkit-clip-path: url("#triangle-clip");
  clip-path: url("#triangle-clip");
  background: #9E566E;
  z-index: 1;
  width: 100%;
  height: 155px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  pointer-events: none;
}

.clip-solid:hover:after {
  height: 0;
  -webkit-transition: all 0.45s ease-in;
  transition: all 0.45s ease-in;
}

.clip-solid:hover .social-share-block {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.social-share-block {
  position: absolute;
  bottom: 20px;
  right: 75px;
  color: #fff;
  font-size: 70%;
  z-index: 2;
}

.social-each {
  font-size: 80%;
}

.clip-gradient {
  background: #222;
  width: 160px;
  height: 160px;
}

.clip-gradient .clip-caption {
  color: #fff;
}

.clip-border {
  background: -webkit-linear-gradient(300deg, #aebcbf 0%, #6e7774 50%, #333 61%, #333 100%);  
  background: linear-gradient(150deg, #aebcbf 0%,#6e7774 50%,#333 61%,#333 100%);
  width: 160px;
  height: 160px;
  margin-top: 7px;
  color: #222;
}

.clip-border::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 4%;
  right: 4%;
  bottom: 4%;
  margin: 0 auto;
  background: url("https://karenmenezes.com/static/img/demos/shapes-polygon/bg-cubes.png");
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  -webkit-clip-path: url("#hexagon-clip");
  clip-path: url("#hexagon-clip");
  z-index: -1;
}

.clip-tagline {
  display: block;
  color: #758C9B;
  text-decoration: none;
  text-align: center;
}

@media only screen and (min-width: 550px) {
  .wrap {
    display: table;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
  }

  .clip-block {
    display: table-cell;
    vertical-align: middle;
  }

  .clip-border {
    margin-top: 20px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.