title: Why text block is equal to size of the image?
body: <p>I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.</p>
  <p>This is how it looks like:
  <a href="https://i.stack.imgur.com/FiJl6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FiJl6.png" alt="demo here" /></a></p>
  <p>I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)</p>
  <p>I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...</p>
  <p><strong>Index.html</strong> :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 2000px;
    overflow-x: hidden;
    font-family: "Monument Extended", Arial, Helvetica, sans-serif;
    background: #0f0f0f;
  }
  
  .container {
    max-width: 600px;
    margin: 200px auto;
    width: 100%;
    padding: 10px 0px;
    position: relative;
  }
  
  .image-container {
    padding-bottom: 100%;
    background: black;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-image: url("hero-img.jpeg");
  
    background-size: cover;
    background-position: center;
  }
  
  .text {
    color: white;
    margin: 0;
    font-size: 64px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: -50%;
    transform: translateY(-50%);
    z-index: 0;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .text.text-dark {
    color: red;
  }
  .text span {
    position: relative;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Parallax Text On Scroll&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="smooth-scroll-wrapper"&gt;
          &lt;div class="content"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="image-container"&gt;
                      &lt;h2 class="text text-dark"&gt;
                          &lt;span class="parallax-title"&gt;
                              the red text here
                          &lt;/span&gt;
                      &lt;/h2&gt;
                  &lt;/div&gt;
  
                  &lt;h2 class="text"&gt;
                      &lt;span class="parallax-title"&gt;
                          the white text here
                      &lt;/span&gt;
                  &lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          let atScroll = false;
          let parallaxTitle = document.querySelectorAll(".parallax-title");
  
          const scrollProgress = () =&gt; {
              atScroll = true;
          };
  
          const raf = () =&gt; {
              if (atScroll) {
                  parallaxTitle.forEach((element, index) =&gt; {
                      element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
                  });
                  atScroll = false;
              }
              requestAnimationFrame(raf);
          };
  
          requestAnimationFrame(raf);
          window.addEventListener("scroll", scrollProgress);
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>