h1 Hover Card Effect
.cards
  .card.card1

  .card.card2
    h2  MacBook Air
    p Lightness
    p The most loved Mac is about to make you fall in love all over again. Available in silver, space gray, and gold, the new thinner and lighter MacBook Air features a brilliant Retina display, Touch ID, the latest-generation keyboard, and a Force Touch trackpad

@import url('https://fonts.googleapis.com/css?family=Poppins')
html,body
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  font-family: 'Poppins', sans-serif
  background: #bdc3c7
  background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7)
  background: linear-gradient(to bottom, #2c3e50, #bdc3c7)

  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  color: #efefef
  letter-spacing: 5px
*
  box-sizing: border-box
  // border: 1px solid red
p
  letter-spacing: normal
.cards
  position: relative
  width: 300px
  height: 400px
  .card
    position: absolute
    border-radius: 8px
  .card1
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    background-image: url(https://picsum.photos/300/400?image=0)
    width: 100%
    height: 100%
    top: 0
    left: 0
    transition-property: left , z-index , transform
    transition-delay: 0s, .5s, .5s
    transition-duration: .5s, 0s, .5s
    z-index: 2
    transform: translate(-10px,-10px)

  .card2
    background: #0F2027
    background: -webkit-linear-gradient(to top,#0F2027, #203A43, #2C5364 )
    background: linear-gradient(to top,#0F2027, #203A43, #2C5364 )
    padding: 10px
    text-align: center
    top: 0
    left: 0
    width: 100%
    height: 100%
    transition-property: left , z-index , transform
    transition-delay: 0s, .5s, .5s
    transition-duration: .5s, 0s, .5s
    z-index: 1

.cards:hover .card.card1
    transition-property: transform, z-index, left 
    transition-delay: 0s, .5s, .5s
    transition-duration: .5s, 0s, .5s
    z-index: 1
    transform: translate(170px,-10px)
    left: -160px

.cards:hover .card.card2
    transition-property: transform, z-index, left 
    transition-delay: 0s, .5s, .5s
    transition-duration: .5s, 0s, .5s
    z-index: 2
    transform: translateX(-160px)
    left: 160px