Naniesienie na zdjęcie textu zabawa z CSS

Mam takie pytanie korzystając z Bootstrapa są tam zdefiniowane już klasy opisujące wygląd fotek i np. można na stronie ustawiać zdjęcia z białą obramówką.
Chciałbym jednak na takie zdjęcia z obramówkami nanieść ciemny pasek (przezroczystość np. 50%, który pozwoli nakładać biały tekst na zdjęcia. Pytanie jak to wykonać aby ten pasek nałożyć poprawnie na zdjęcie aby on idealnie przylegał od lewej krawędzi do prawej ale na zdjęciu? Z racji, że tło strony jest jasne dobrze nie widać białej obramówki na zdjęciu.

Mam kawałek kodu CSS, ale to moje rozwiązanie sprawia, że pasek po prawej stronie ląduje zamiast na końcu zdjęcia to na framudze.

 .pasek_overlay {
height: 20px;
  width:100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  color: white;
  padding: 2px;
  margin: 5px;
}

Chodzi mi też o to aby pasek z tekstem się skalował, kiedy okno przeglądarki się zmniejsza to bootstrap pomniejsza zdjęcia, ale aby i ten element, który nakładam chcę aby się poprawnie skalował. Dlatego nie mogę ustawić szerokości zdefiniowanej na np. 100px, a 100% ustawia mi też nie tak jak chcę.
Ktoś może mnie nakierować w tym problemie?

A jakbyś zamiast width 100% dał left i right 0px?

Wrzuciłem przykład na jsfiddle tak aby zobrazować przykład, a więc moja wersja wygląda tak:
https://jsfiddle.net/bnuuvj49/3/

Pytanie jak ten pasek, który ma nakładać się na zdjęcie ostylować aby nakładał się od lewej krawędzi zdjęcia do jego prawej krawędzi.
Dodatkowo jak ustawić skalowanie paska i tekstu, że kiedy okno przeglądarki się zmniejsza i zdjęcie się zmniejsza to pasek i tekst też się prawidłowo skalują? Jęsli dla paska w CSS ustawię width: 200px to będę miał stały rozmiar jak dam na auto, to jest tak jak jest teraz wiec jak na całej długości zdjęcia nałożyć ten pasek?

hhmmm?
https://jsfiddle.net/bnuuvj49/21/

Jak chcesz zrobć overlay to musisz absoluta wrzucić w rodzica z position:relative, a reszta już normalnie wedle uznania.