Text block over image with background the same length of the image - html

Question

I'm trying to create a text block with transparent background which is the same width as the image. However if I just add padding to the header then some may overlap or not be long enough due to the varying length in text.
Currently looks like this: http://puu.sh/sdBCX/994cc31da8.png
Here is the relevant HTML:
<div class="container-fluid">
<div class="row">
<div class="artist-grid">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>BASSNECTAR</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>DATSIK</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>CHAINSMOKERS</span></h3>
</div>
<div class="col-lg-2">
<img id="#artistTile" src="https://dummyimage.com/300x300">
<h3><span>ZEDS DEAD</span></h3>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
And the relevant CSS:
h3 {
position: absolute;
top: 244px;
width: 100%
}
h3 span {
color: white;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.artist-grid {
padding-top: 22px;
}
#artistTile {
position: relative;
max-width: 100%;
}
Cheers!

Answer 1

div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}