html,body
  margin: 0
  padding: 0
  width: 100%
  height: 100vh
  background: #141E30
  background: -webkit-linear-gradient(to top, #243B55, #141E30)
  background: linear-gradient(to top, #243B55, #141E30)
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden

.card
  border-radius: 16px
  width: 360px
  height: 360px
  background: url('http://ekladata.com/6wfaqtiLNLjsEY9RQjA_dxcS1Mk@150x240.jpg')
  position: relative
  overflow: hidden
  box-shadow: 0 5px 50px rgba(#000,.85)
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    top: 0
    background-color: rgba(#000,.92)
  .img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    display: flex
    span
      width: 25%
      height: 100%
      background: url(http://ekladata.com/6wfaqtiLNLjsEY9RQjA_dxcS1Mk@150x240.jpg)
      transition: .5s
      &:nth-child(1)
        background-position: 0
        transition-delay: 0
      &:nth-child(2)
        background-position: 33.33333%
        transition-delay: .1s
      &:nth-child(3)
        background-position: 66.66666%
        transition-delay: .2s
      &:nth-child(4)
        background-position: 100%
        transition-delay: .3s
        
.card:hover 
  .img>span
    transform: translateY(-100%)
  .content
    transform: translateY(0%)
    transition: 1s
    transition-delay: .1s
  
.content
  box-sizing: border-box
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  color: white
  padding: 20px 20px
  width: 100%
  height: 100%
  transform: translateY(100%)