<div class="hero">
  <img src="https://unsplash.com/photos/XR4Ku9kE0Zo/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzM4fHxmb3Jlc3R8ZW58MHx8fHwxNjkzODM5MTcxfDA&force=true" alt="Hero Image" width="700px">
  <h1 class="overlay-text">
    Amazon <br> Forest
  </h1>
</div>
.hero {
  position: relative;
  max-width: 450px;
  width: 100%;
}

.hero img{
  width: 100%;
}

.overlay-text {
  position: absolute;
  transform: translate(20%, -150%);
  font-size: 3em;
  line-height: 55px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  color: rgb(2, 75, 38);
  mix-blend-mode: overlay;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.