<div class="container">
  <img class="img" src="https://placehold.it/800x500" style="--index: 0;"/>
  <p>
    My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
  </p>
  <p>
    My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
  </p>
  <img class="img" src="https://placehold.it/800x500" style="--index: 1;" />      <p>
  Hey, take a look at the earthlings. Goodbye! Remind me to thank John for a lovely weekend. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! Hey, you know how I'm, like, always trying to save the planet? Here's my chance.
  </p>
  <p>
    Hey, take a look at the earthlings. Goodbye! Remind me to thank John for a lovely weekend. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! Hey, you know how I'm, like, always trying to save the planet? Here's my chance.
  </p>
  <img class="img" src="https://placehold.it/800x500" style="--index: 2;" />      <p>
  Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
  </p>
  <p>
    Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Must go faster. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
  </p>
</div>
body {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

img {
  display: block;
  width: 100%;
}

p { margin: 0; }

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
}
  
.container > * {
  grid-column: 2;
}

.container img {
  --percent: calc(var(--index) * 100% + var(--index) * 24px);
  position: absolute;
  grid-column: 1 / 2;
  transform: translateY(var(--percent));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.