.card
   img(src="//iw-imgthmb.s3.amazonaws.com/thumb/da47c497a1a84897b6fa09512f742363/220x.jpg")
   .overlay
   .info
      .title Untitled Work #170
      .price Original at $500, prints from $80

/*INFO (BOX THAT SURROUNDS TITLE AND PRICE)*/
$info-padding: 20px

/*ARTWORK TITLE TEXT*/
$title-font-size: 20px
$title-font-color: white
$title-font-style: italic

/*SPACE BETWEEN THE TWO*/
$title-margin: 16px

/*ARTWORK PRICE TEXT*/
$price-font-size: 14px
$price-font-color: white
$price-font-style: none

/*OVERLAY GRADIENT*/
$overlay-opacity: 1
$gradient-angle: 0deg
$gradient-bottom-color: black
$gradient-top-color: transparent
$gradient-ratio: 100%

/*ANIMATIONS*/
/*OVERLAY*/
// offset the overlay so it moves up, 
// can move down with negative number
$overlay-start-position: 100px

// on hover
$overlay-duration-in: 300ms
$overlay-delay-in: 0ms
$overlay-timing-in: ease-in-out

// on mouse leave
$overlay-duration-out: 100ms
$overlay-delay-out: 0ms
$overlay-timing-out: ease-in-out

/*INFO-TEXT*/
$info-start-position: 10px

$info-duration-in: 180ms
$info-delay-in: 50ms
$info-timing-in: ease-in-out

$info-duration-out: 100ms
$info-delay-out: 0ms
$info-timing-out: ease-in-out


*
   box-sizing: border-box
body
   height: 100vh
   display: flex
   justify-content: center
   align-items: center

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i|Source+Sans+Pro:300')

@mixin cormorant
   font-family: 'Cormorant Garamond', serif
@mixin source
   font-family: 'Source Sans Pro', sans-serif
.card
   position: relative
   overflow: hidden
   img
      display: block
.info
   position: absolute
   bottom: 0
   padding: $info-padding
   opacity: 0
   transition: all $info-duration-out $info-delay-out $info-timing-out
   transform: translateY($info-start-position)
.title
   @include cormorant
   font-size: $title-font-size
   margin-bottom: $title-margin
   color: $title-font-color
   font-style: $title-font-style
.price
   @include source
   font-size: $price-font-size
   color: $price-font-color
   font-style: $price-font-style
.overlay
   opacity: 0
   position: absolute
   top: 0
   right: 0
   left: 0
   bottom: 0
   background: linear-gradient($gradient-angle, $gradient-bottom-color, $gradient-top-color $gradient-ratio)
   transition: all $overlay-duration-out $overlay-delay-out $overlay-timing-out
   transform: translateY($overlay-start-position)
.card:hover
   .overlay
      transform: translate(0)
      opacity: $overlay-opacity
      transition: all $overlay-duration-in $overlay-delay-in $overlay-timing-in
   .info
      transform: translate(0)
      opacity: 1
      transition: all $info-duration-in $info-delay-in $info-timing-in