<div class="item-grid">
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/1863078/screenshots/4835474/ux_process-sm.jpg" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">UI/UX</p>
        <h2 class="item-text-title">Magna Inceptos Commodo</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2958133-Facebook-in-material-design">Ligula Ridiculus Tortor</a>
  </div>
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/278549/screenshots/4831219/doc_in_italy_dribbble03-01.png" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">Design</p>
        <h2 class="item-text-title">Ligula Ridiculus Tortor</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2974913-Home">New Stripe Homepage</a>
  </div>
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/2101530/screenshots/4835848/05.png" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">Concept</p>
        <h2 class="item-text-title">Tellus Ipsum</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2974913-Home">NASA</a>
  </div>
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/1803663/screenshots/4785720/lighthouse_in_cape_neddick__york_800_600.png" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">Illustration</p>
        <h2 class="item-text-title">Mattis Vulputate Elit Vestibulum</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2969126-Some-Icons">Icons</a>
  </div>
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/729829/screenshots/4738104/galshir-storytime.png" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">Design</p>
        <h2 class="item-text-title">Justo Sit</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2961622-IO-Flux-Creative-Exchange">IO Flux</a>
  </div>
  
  <div class="item">
    <div class="item-image">
      <img src="https://cdn.dribbble.com/users/107759/screenshots/4718965/exo.png" alt="" />
    </div>
    <div class="item-text">
      <div class="item-text-wrapper">
        <p class="item-text-dek">UI/UX</p>
        <h2 class="item-text-title">Tellus Ullamcorper Vehicula</h2>
      </div>
    </div>
    <a class="item-link" href="https://dribbble.com/shots/2974913-Home">Skilledup : Nav</a>
  </div>
</div>

body {
  font-family: "Montserrat", sans-serif;
  background: #202030;
}

.item-grid {
  max-width: 900px;
  margin: 100px auto;
  position: relative;
  box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
  overflow:hidden;
}

.item {
  position: relative;
  float: left;
  width: 33.33333333333%;
  background-color: #128EF3;
  overflow: hidden;
  &:after {
    content: '';
    display: block;
    background-color: inherit;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(2) translateX(-75%) translateY(-75%) translateZ(0) rotate(-28deg);
    transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1);
  }
  &:hover {
    &:after {
      transform: scale(2) translateX(0%) translateY(0%) translateZ(0) rotate(-28deg);
    }
    .item-image {
      transform: scale(1.2) translateZ(0);
    }
    .item-text {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.item-image {
  height: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 750ms cubic-bezier(0.23, 1, 0.32, 1);
  
  &::before {
    content: "";
    display: block;
    padding-top: 75%;
    overflow: hidden;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    line-height: 0;
  }
}

.item-text {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  text-align: center;
  z-index: 1;
  color: #ffffff;
  transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 300ms;
  transform: translateY(-20%);
}

.item-text-wrapper {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.item-text-title {
  font-weight: normal;
  font-style: 16px;
  padding: 0 15px;
  margin: 5px 0 0 0;
}

.item-text-dek {
  text-transform: uppercase;
  font-style: 14px;
  opacity: 0.7;
  margin: 0;
}

.item-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}