html - CSS block on top of image -

i trying create this(without blue lines):

the grey picture have insert , letters must displayed above.

i've tried on own can't

put <img> tag div wrapper, put second div into first 1 (after img), write text div , use css rules like

.my_div_wrapper {   position: relative;   width: 300px; } .my_image {   width: 100%; ) .my_text_over_image {   position: absolute;   bottom: 20px;   height: 50px;   color: white;   background: rgba(0, 0, 0, 0.5); } 

the important thing absolute position. last number in background setting opacity of background color. choose color , opacity (and else) desired).