<article>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ea animi sequi nisi nostrum voluptates voluptate velit ut, nobis ipsa doloremque neque, quod exercitationem, veniam consequuntur ratione ullam reprehenderit ex!</p>
  <p>Aliquid ad obcaecati laudantium consectetur architecto officiis ab voluptates consequuntur temporibus aspernatur placeat deserunt, quod nulla esse soluta similique? Eaque autem itaque, animi non ut tempore provident suscipit eligendi dolor?</p>
  <p>Eveniet velit illum dicta deserunt temporibus ducimus vel totam vitae nisi tenetur. Vero odio dolore eum, voluptatum sed reiciendis, assumenda placeat quod totam atque reprehenderit porro non est vel rem.</p>
  <figure>
    <figcaption>
      <strong>Highway</strong>
      Blues
    </figcaption>
    <img src='https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Woman holding guitar over shoulder'>
    <img src="https://res.cloudinary.com/css-tricks/image/upload/q_auto/v1580427660/guitar-woman_pfqzvc.png" alt="" class="top">
    
  </figure>
  <p>Reiciendis, aut pariatur enim ea molestias fugiat suscipit cumque asperiores cum animi sunt, ullam mollitia nobis numquam. Cumque veniam facere ipsa, deleniti fugiat iusto, doloribus ut obcaecati doloremque nihil quo.</p>
  <p>Quidem, nulla cupiditate pariatur, corrupti aperiam provident doloribus commodi laboriosam blanditiis cumque odit incidunt repudiandae ab minus aliquid possimus perferendis. Totam ipsa sequi ullam architecto quia, officia minima voluptatem eaque?</p>
  <p>Consequuntur facilis nobis velit est neque quis incidunt esse porro cupiditate in praesentium sunt magnam temporibus nesciunt, deleniti eaque dolores iure sed harum adipisci. Reiciendis enim rerum at nostrum esse.</p>
  <p>Aspernatur perferendis ducimus quasi magnam a, voluptatum nemo inventore quibusdam molestias earum, saepe accusamus repellendus beatae. Natus laboriosam in explicabo eius suscipit dolores a itaque perspiciatis corporis praesentium! Sapiente, iste.</p>
  <p>Voluptatem quo aliquid accusantium, voluptates officia error incidunt illo, eius itaque ad tempora deserunt iusto pariatur perspiciatis repudiandae a, natus vero provident repellendus. Aperiam odit, adipisci magnam voluptatibus omnis eum!</p>
  <p>Ratione unde similique laborum nemo facere amet, aliquid tempora eaque placeat itaque illum rem quam neque delectus labore, perspiciatis iste minus fugiat accusantium voluptatum saepe? Nulla excepturi et dignissimos saepe?</p>
  <p>Quo qui at nesciunt numquam laboriosam iure ullam vitae tempora expedita neque et ea, doloremque excepturi eaque aspernatur quod autem veniam? Ipsum porro quidem facere. Sint debitis facere dolor in.</p>
</article>

article {
  max-width: 500px;
  margin: 2rem auto;
  font: 1.5rem/1.5 system-ui;
}
figure {
  padding: 0;
  margin: 0;
  position: relative;
  padding-bottom: 150px;
  img {
    max-width: 100%;
    display: block;
    margin-bottom: 120px;
  }
  img.top {
    position: absolute;
    top: 115px;
    left: 0;
  }
  figcaption {
    border: 5px solid #009688;
    color: #009688;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 1;
    padding: 0.25rem;
    text-align: center;
    position: sticky;
    top: 0;
    mix-blend-mode: color-dodge;
    strong {
      display: block;
    }
  }
  + p {
    padding-top: 20px;
    margin-top: -280px;
    background: white;
    position: relative;
  }
}