title: CSS Responsive text over images in flexbox
body: <p>I have a flexbox full of images that will all have text over the top them. I am stuck at trying to get the text to be responsive. The text needs to stay inside of the div and resize with the image. Anyone have any tips or tricks on how to best accomplish this? My full code example is linked below.</p>
  
  <p><a href="https://i.stack.imgur.com/JrlZl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JrlZl.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="flex-row row"&gt;
    &lt;div class="flex-column"&gt;
              &lt;div class=" welcome overlay-parent"&gt;   
                    &lt;img src="http://placehold.it/548x227"&gt;
                      &lt;div class="overlay-text"&gt;&lt;h1&gt;Welcome to My Place&lt;/h1&gt;&lt;/div&gt;
                  &lt;/div&gt;
      &lt;div&gt;&lt;img src="http://placehold.it/548x459"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-column"&gt;
      &lt;div class="flex-row"&gt;
        &lt;div&gt;&lt;img src="http://placehold.it/812x459"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="flex-row"&gt;
        &lt;div class="feature-about overlay-parent"&gt;
          &lt;img src="http://placehold.it/406x227"&gt;
                  &lt;div class="overlay-text"&gt;&lt;h2&gt;About Something&lt;/h2&gt;
                      &lt;p&gt;It’s the latest lorem ipsum dolor sit brief intro to the park goes here. ounded in 2016. It’s the latest lorem ipsum dolor sit brief intro to the park goes here. &lt;/p&gt; &lt;/div&gt;
        &lt;/div&gt;
            &lt;div&gt;&lt;img src="http://placehold.it/406x227"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-row row"&gt;
    &lt;div&gt;&lt;img src="http://placehold.it/812x459"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="http://placehold.it/548x459"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/enigmas2/pen/ygKmGX" rel="nofollow noreferrer">https://codepen.io/enigmas2/pen/ygKmGX</a></p>