<div class="parallax-wrapper">
  <div class="hero parallax-content"><img src="https://w.wallhaven.cc/full/0j/wallhaven-0j5zvp.jpg" alt="">
  </div>
  <div class="main-content">
  </div>
</div>

.caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  color: white;
  z-index: 2;
  font-size: 0.6rem;
}

.parallax-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 10px;
}

.parallax-content {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    object-fit: cover;
    z-index: 1;
    transform: translateZ(1px);
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 100%;
    transform: translateZ(8px);
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.013) 8%,
      hsla(0, 0%, 0%, 0.049) 14.8%,
      hsla(0, 0%, 0%, 0.104) 20.8%,
      hsla(0, 0%, 0%, 0.175) 26%,
      hsla(0, 0%, 0%, 0.259) 30.8%,
      hsla(0, 0%, 0%, 0.352) 35.3%,
      hsla(0, 0%, 0%, 0.45) 39.8%,
      hsla(0, 0%, 0%, 0.55) 44.5%,
      hsla(0, 0%, 0%, 0.648) 49.5%,
      hsla(0, 0%, 0%, 0.741) 55.2%,
      hsla(0, 0%, 0%, 0.825) 61.7%,
      hsla(0, 0%, 0%, 0.896) 69.2%,
      hsla(0, 0%, 0%, 0.951) 77.9%,
      hsla(0, 0%, 0%, 0.987) 88.1%,
      hsl(0, 0%, 0%) 100%
    );
    z-index: 3;
  }
}
.main-content {
  height: 100vh;
  background-color: khaki;
}