Put Background Image Over Text

#homepage-solutions .image-box {
  display: inline-block;
  position: relative;
  overflow: hidden;
  min-width: 250px;
  min-height: 250px;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  list-style: none;
  vertical-align: middle;
}
#homepage-solutions .image-box img {
  display: block;
  height: 200px;
  width: 100%;
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
#homepage-solutions .image-box:hover img {
  -webkit-filter: grayscale(0);
  filter: none;
}
#homepage-solutions .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  text-align: center;
  max-width: 500px;
}
#homepage-solutions h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}
#homepage-solutions .text-box p {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
  display: inline-block;
  width: auto;
  color: #fff;
  background: #fd5f11;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 20px;
  margin: 5px 0 0;
  border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
  opacity: 0.75;
}

    <div id="homepage-solutions">
      <div class="image-box">
        <img
          src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg"
        />
        <div class="text-box">
          <h3>Metalworking</h3>
          <a href="comingsoon" class="btn">Learn More</a>
        </div>
      </div>
    </div>

CSS: How can I fix the background image and also create a text box?

The background image's dimensions are changing because of the background-size: cover; property.

background-size: cover

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

Source: MDN

Change it to auto to keep the original proportions.

Now, for the text, wrap the heading tag in a div and add this css:

div {
    white-space: nowrap; /*important - see reference*/
    width: /*add your width*/;
    height: /*add your height*/;
    overflow: auto;
}

h4 {
    overflow: inherit;
    /*no need to inherit white-space, it will be inherited automatically*/
}

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

Source: MDN

Email Design: Text over background image

Thanks for supplying the final HTML, that helped a lot!

So you've got a couple of issues with your final HTML.

1. You have divs wrapping each of the MSO snippets which essentially closes off and breaks the snippets. So remove the closing div tag for the first MSO snippet and the opening div tag for the second snippet.
2. You'll need need to shift these two tags in, so it is only wrapping your inner content. We usually add a div to wrap the inner content to help reset the HTML in Outlook and then we can set whatever styles etc in the inner content.
3. I then noticed you've got a double up of the inner tags. Remove the outer tags as they don't have any styles declared, whereas the inner one does.

Amending those small things will fix your issue.

Here is the snippet cleaned up in case my instructions don't make sense:

<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
    <tr>
        <td height="143" width="640" align="center" background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" style="background-color:#00A699;background-size:cover">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
            <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
            <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
            <![endif]-->
            <div>
            <table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
                <tbody>
                    <tr>
                        <td align="center" className="arb_headline_1" style="padding-top: 10px;"><span style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</tbody>
</table>