CSS - Vertical pan animation

by Rodwyn Moreno

HTML

<div class="vertical-pan">
  <img src="https://s-media-cache-ak0.pinimg.com/564x/ea/f3/ce/eaf3ce16fa77a4cbf59f9dae544111b6.jpg" />
</div>

SCSS

div {
  border: 10px solid #FFFFFF;
  height: 300px;
  width: 300px;
}

.vertical-pan {
  overflow: hidden;
  
  img {
    margin-top: 0;
    transition: margin 1s ease;

    &:hover {
      margin-top: -100%;
    }
  }
 }