html - Text Overlap on Image with CSS -

i have image want overlap piece of text @ bottom transparent black background.

whats easiest way achieve ,

<img src="http://assets3.parliament.uk/iv/main-large//imagevault/images/id_7382/scope_0/imagevaulthandler.aspx.jpg" alt="">  <div>       <p class="description_content">example</p>   </div>   

wrap img , p tag in div, apply position property , style want.

something example...

html

<div>     <img src="http://assets3.parliament.uk/iv/main-large//imagevault/images/id_7382/scope_0/imagevaulthandler.aspx.jpg" alt="" />     <p class="description_content">example</p> </div> 

css

div {     position: relative;     width: 460px;     height: 230px; } img, p {     position: absolute;     width: 100%; } p {     background-color: rgba(0, 0, 0, 0.5);     padding: 10px;     bottom: 0;     left: 0;     box-sizing: border-box;     color: #fff;     margin: 0; } 

result

jsfiddle example: http://jsfiddle.net/n8k326g6/

---

this example can make idea on how can done. ^{(just 1 way)}

---

edit: added responsive example

for responsive solution, remove width & height div , give position:absolutepropertie only p tag.

css

div {     position: relative; } img, p {     width: 100%; } p {     position: absolute;     background-color: rgba(0, 0, 0, 0.5);     padding: 10px;     bottom: 0;     left: 0;     box-sizing: border-box;     color: #fff;     margin: 0; } 

result

updated jsfiddle example: http://jsfiddle.net/n8k326g6/1/

---

again, example point in right direction...

---