CSS Bootstrap i nakładaie textu na foto

Chcę za pomocą Bootstrapa ostylować wygląd foto na stronie tzn., jest klasa, która zdjęciom nadaje otoczkę (biała obramówka), ale na zdjęcie chcę nałożyć ciemny pasek i na nim biały text:



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ą? Jeśli dla paska w CSS ustawię width: 200px to będę miał stały rozmiar jak dam na auto, to jest tak jak jest teraz więc jak na całej długości zdjęcia nałożyć ten pasek?
Ktoś coś podsunie?

Zamiast width w pasku, skoro pozycjonujemy absolutnie możemy użyć atrybutów 'pozycji na 0'. Wygląd w kodzie:


top: 0;
right: 0;
left: 0;


Tutaj masz demo na tym co miałeś zrobione: https://jsfiddle.net/bnuuvj49/5/ (jeśli nie będziesz potrzebował, to usuń margin z klasy rodzica).