Add a scroll image on mouse over

This is a cool feature that I stole from the Bricks template back end. In the video I show you how it is done. If you have any questions please do not hesitate to ask in the video.

Here is the code to make this work

%root% {
  position: relative;
  overflow: hidden;
  max-height: 35rem;
  
}

%root% img {
  position: absolute;
  bottom: 0;
  transition: transform 1.3s ease-out;
}

%root%:hover img {
 transform: translateY(-60%);
  transition-delay: .4s;
}