CSS - Side pan animation

by Rodwyn Moreno

HTML

<div class="sidepan">
  <img src="http://sm.ign.com/ign_ap/image/t/top-10-best-batman-artists/top-10-best-batman-artists_bg86.jpg" />
</div>

SCSS

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

.sidepan {
  overflow: hidden;
  
  img {
    margin-left: 0;
    transition: margin 1s ease;

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