CERA - Centered overflow image

by Paf_Sebastien

HTML

<div class="other-comp"></div>

<div class="comp">
  <div class="container">
    <h2>Title</h2>
    <a href="#" class="cta">CTA</a>
    <img src="https://lorempixel.com/200/250" alt="">
  </div>
</div>

SCSS

.comp {
  padding: 20px 0;
  background: url(https://lorempixel.com/800/200);
  background-size: cover;

  img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.container {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.other-comp {
  height: 200px;
  background-color: purple;
}