How to make my text stick to a responsive div?

Question

I am having issues making my text stick to responsive images like this: https://cloud.screenpresso.com/S8N5c/2019-10-11_16h25_59.png

I have tried changing the position in CSS.

You can check my source code in https://eylenkim.github.io/ArtByEylen/

When you drag the screen, the text also moves away from the responsive images.

But here's a snippet: ```HTML

    <div class="container">
      <div class="row">

      <div class="one-half column u-pull-left">
        <a href="Shop/shop.html">
          <img data-sr class="homeReveal u-max-full-width duo-pic" src="photo/artbyeylen13.JPG">

          <div class="overlap-text">
            <div class="overlap-text-outline">
              <h2 class="load">Enter Shop</h2>
            </div>
            <div class="overlap-text-base">
              <h2 class="load">Enter Shop</h2>
            </div>
          </div>

        </a>
      </div>

      <div class="one-half column u-pull-right">
        <a href="Portfolio/portfolio.html">
          <img data-sr class="homeReveal u-max-full-width duo-pic" src="photo/artbyeylen11.JPG">

        <div class="overlap-text">
          <div class="overlap-text-outline">
            <h2 class="load">Portfolio</h2>
          </div>
          <div class="overlap-text-base">
            <h2 class="load">Portfolio</h2>
          </div>
        </div>

        </a>
      </div>

      </div>
    </div>
  </section> 

```

    .overlap-text h2{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        letter-spacing: .1px;
        text-align: left;
    }

    .overlap-text.is_active h2{
      transform: translateY(-25%) scale(1.15);
      top:45%;
    }


    .overlap-text-outline h2{
      font-family:'GT-America-Extended-Black';
      font-weight: 800;
      font-style: normal;
      color: transparent;
      -webkit-text-stroke: 1.4px #fff;
      z-index: 7;
      font-size: calc(5em + 1vw);
    }

    .overlap-text-base h2{
      font-family:'GT-America-Extended-Black';
      font-weight: 800;
      font-style: normal;
      color: rgba(255,255,255,0.9);
      background-clip: text;
      -webkit-background-clip: text;
      background-image: url(otherCss/noise.gif);
      -webkit-text-stroke: none;
      z-index: -4;
      font-size: calc(5em + 1vw);

      -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    ```