.container
  - for(var x = 0; x < 6; x++)
    .wrapper
      .card
        i(class='fal fa-arrow-right')
  
View Compiled
gradient(a, b)
  background a
  background linear-gradient(to top, a, b)

flex(a, b)
  display flex
  align-items a
  justify-content b
  
grid(a, b)
  display grid
  grid-template-columns a
  grid-gap b
  
radius(a)
  border-radius a
  
background-default()
  background-size cover
  background-repeat no-repeat
  background-position center
  
font()
  font-family 'Montserrat', sans-serif
  
color1 = #ECE9E6
color2 = #58A4B0
color3 = #373F51
color4 = #1C2541

after(a)
  content ''
  height 100%
  width 100%
  position absolute
  top 0
  left 0
  background-image url(a)
  background-size cover
  background-color color3
  background-blend-mode screen
  transform skew(10deg) scale(1.2)
  transition 0.25s

*
  backface-visibility hidden

html
  gradient(color1, white)
  min-height 100vh
  flex(center, center)
  body
    margin 0
    height 100%
    width 100%
    font()
    text-align center
    h1
      text-align center
      padding 2rem 0 1rem
      margin 0
      color color3
    h6
      font-size 1.2rem
      margin 0
      font-weight 300
    p
      margin-bottom 2rem
    
.container
  grid(auto auto auto, 3rem)
  padding 2rem 4rem 4rem
  .wrapper
    transform skew(-10deg)
    transition 0.25s
    &:before
      content ''
      left 0
      top 0
      height calc(100% - 10px)
      width calc(100% - 10px)
      radius(40px)
      opacity 0
      border 2px solid color1
      position absolute
      z-index -1
      transition 0.5s 0.05s
    &:hover
      &:before
        opacity 1
        transform translateY(1.5rem) translateX(1.5rem)
    &:nth-child(1)
      .card
        &:after
          after('https://images.pexels.com/photos/953219/pexels-photo-953219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:nth-child(2)
      .card
        &:after
          after('https://images.pexels.com/photos/316891/pexels-photo-316891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:nth-child(3)
      .card
        &:after
          after('https://images.pexels.com/photos/3303/water-drink-fresh-lemons.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:nth-child(4)
      .card
        &:after
          after('https://images.pexels.com/photos/635537/pexels-photo-635537.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:nth-child(5)
      .card
        &:after
          after('https://images.pexels.com/photos/6478/tree-lemon-fruit.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:nth-child(6)
      .card
        &:after
          after('https://images.pexels.com/photos/709816/pexels-photo-709816.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    &:hover
      transform translateX(-1rem) translateY(-1rem) skew(-10deg)
      .card
        &:after
          background-blend-mode normal
        box-shadow 0.5rem 0.5rem 1rem rgba(0,0,0,0.1)
        .fal
          bottom 4rem
          background-color rgba(255,255,255,0.8)
  .card
    background-color white
    radius(40px)
    height 15rem
    padding 2rem
    position relative
    overflow hidden
    &:after
      background-default()
    .fal
      position absolute
      bottom -1rem
      right 3rem
      radius(100%)
      padding 1rem
      font-size 1.5rem
      color color3
      z-index 1
      transform skew(10deg) translateY(50%)
      text-align center
      transition 0.25s
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js