.wrapper

  .card
    .fon
    .text
      h2 Transition
      p Lorem ipsum dolor sit amet consectetur adipisicing elit.
      .triangle
    .btn View
    
  .card
    .fon
    .text
      h2 Transition
      p Lorem ipsum dolor sit amet consectetur adipisicing elit.
      .triangle
    .btn View
    
  .card
    .fon
    .text
      h2 Transition
      p Lorem ipsum dolor sit amet consectetur adipisicing elit.
      .triangle
    .btn View
    
  .card
    .fon
    .text
      h2 Transition
      p Lorem ipsum dolor sit amet consectetur adipisicing elit.
      .triangle
    .btn View

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900')

$blue: #3498DB
$white: #fff
$speed: .25s
*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  font-family: 'Lato'
  
.wrapper
  width: 100%
  height: 100vh
  background: $blue
  display: flex

.card
  width: 200px
  height: 350px
  background: url(https://images.unsplash.com/photo-1510258791301-4d7ac469cc46?ixlib=rb-0.3.5&s=e7fb8ddadf15658efc6a99bd5fd6482b&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) no-repeat center / cover
  margin: auto
  position: relative
  overflow: hidden
  z-index: 1
  &:hover
    .fon
      opacity: 0
    .text
      height: 10%
      padding: 10px 0 0
      h2
        margin-bottom: 0
      p
        opacity: 0
    .btn
      transform: scale(1)
.fon
  position: absolute
  width: 100%
  height: 100%
  background: #000
  opacity: .3
  z-index: 2
  transition: opacity $speed
.text
  position: absolute
  top: 0
  left: 0
  display: flex
  flex-direction: column
  align-items: center
  justify-content: space-between
  background: $white
  height: 60%
  width: 100%
  text-align: center
  padding: 40px 0 0
  z-index: 4
  transition: height $speed, padding $speed
  h2
    text-transform: uppercase
    color: $blue
    letter-spacing: 2px
    margin-bottom: 20px
    transition: margin-bottom $speed
  p
    line-height: 20px
    margin: 0 10px
    color: #777
    z-index: 5
    transition: opacity $speed
  .triangle
    width: 100%
    height: 50px
    background: #fff
    z-index: 9
    transform: matrix(1.01, -0.3, 0, 2, -1, 10)
    z-index: 3

.btn
  position: absolute
  top: calc(50% - 20px)
  left: calc(50% - 40px)
  margin: auto
  width: 80px
  height: 40px
  display: flex
  justify-content: center
  align-items: center
  text-transform: uppercase
  letter-spacing: 2px
  border: 2px solid $white
  color: $white
  transition: transform $speed - .1s, background $speed, color $speed, border-color $speed
  z-index: 4
  transform: scale(0)
  cursor: pointer
  &:hover
    background: $blue
    border-color: $blue