SCSS

by maya tominaga

HTML

<div class="main">
  <div class="content">
    <img class="main-image" src="https://cdn.pixabay.com/photo/2017/03/25/18/06/color-2174065_1280.png" alt="">
  </div>
  <div class="content">
    <img class="sub-image" src="https://1.bp.blogspot.com/-2dfqdj4nnTY/VxC3WEivQEI/AAAAAAAA54I/4aGk4Ou1-fQ2GLqbby1yGwJwNEl7akB3QCLcB/s450/animal_kirin.png" alt="">    
  </div>
</div>

SCSS

body {
  background: #fff;
  padding: 10px;
  font-family: Helvetica;
}

.main {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 500px;
  overflow: hidden;
  text-align: center;
}

.main-image {
  position: relative;
  width: 100%;
}

.sub-image {
  padding-top: 50px;
}