expand td to image width 100% with hover text - html

Question

I am trying to use table cells with a background image and transparent text and when you hover over the background image (the td cell) the text appears in a transparent black box.
How do I get the td cell to expand to the entire size of the background image, a width of 100% filling the entire td?
Here is my JS Fiddle where I tried two different approaches (background-size:contain; background-size: cover; and background-size: 100% auto;):
https://jsfiddle.net/wpdyjLgd/#&togetherjs=Bp5OxozhEt
Edited CSS (only includes issue - JSFiddle includes all)
.HomeBody2 {
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
#HomeBody2 {
width: 100%;
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
.HomeBody2 h1 {
font-family: "Footlight MT Light";
font-size: 56px;
font-weight: bold;
margin: 0;
color: #062F4F;
padding-right: 10px;
padding-left: 10px;
}
.HomeBody2 h2 {
font-family: "Georgia";
color: #FF3B3F;
font-size: 32px;
font-weight: bold;
margin: 0;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 p {
font-family: "Georgia";
font-size: 24px;
font-weight: none;
margin: 0;
color: transparent;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 a {
color: #FF3B3F;
font-family: "Georgia";
font-size: 24px;
font-weight: bold;
text-decoration: underline;
}
table td.Why:hover {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.Why:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.Why {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.How {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
<table class="HomeBody2" width="100%">
<tbody>
<tr>
<td class="Why" width="33.5%">
<p>Spend less on administrative burdens by finding everyday solutions for your agency. Every dollar saved is a minute spent on other important tasks like analysis and policy.</p>
</td>
<td class="How" width="66.5%">
<p>We start with a demonstration of a potential solution, often one used by another Federal agency, since our best solutions are ones that have broad applicability. Then we move into a discovery process, determining your agency's needs. From there, we build a prototype, refine and reiterate that prototype, and enter testing once the agency is satisfied. Following more refining, the solution enters a pilot project, then moving into a live production environment for the end results. We work in an agile environment, meaning new solutions are always around the corner, offering capabilities to current and potential clients.</p>
</td>
</tr>
</tbody>
</table>