How to place background with text over another background image without HTML - css

Question

I made a form with checkbox as a forest image. I need to place another transparent background with text from html parameter (data-forest) over the forest checbox image but I have to do this only by CSS. I've tried so many solutions but no one work properly. Anyone have some idea?
Final effect on hover:
JsFiddle: https://jsfiddle.net/ac9z8sgd/
HTML
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li><input id="checkbox" type="checkbox" name="forest_type" value="forest_1"><label for="checkbox_forest" data-forest="Estern forest">Forest 1</label></li>
</ul>
<button type="submit">Submit</button>
</form>
CSS
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 250px;
width: 250px;
padding: 15px 15px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
display: inline-block;
font-size: 20px;
color: white;
position: relative;
}

Answer 1

Use a pseudo-element.
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 275px;
width: 184px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover::after {
background: rgba(0, 0, 0, 0.8);
content: attr(data-forest);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
font-size: 20px;
color: white;
display: flex;
}
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li>
<input id="checkbox" type="checkbox" name="forest_type" value="forest_1">
<label for="checkbox_forest" data-forest="Estern forest">Forest 1</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
JSfiddle with Transitions

Answer 2

My suggestion:
label[data-forest]:hover:before {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
font-size: 20px;
color: white;
margin-top: 240px;
margin-left: -15px;
position: absolute;
width: 100%;
text-align: center;
}
BTW: Maybe 0.8 is too much a high value for a perceptible transparency. I'd make it 0.4.