html - How to add a semi transparent box over an image and aligned to the right? -

html - How to add a semi transparent box over an image and aligned to the right? -

i want add together semi transparent text box on image, box needs aligned right, , have not got clue how it, can help?

i have mocked page here: http://dev.gigiscucina.co.uk/, screenshot below. reddish blocks place holders.

the html below. want able add together semi transparent text block on home_widget_2 (text right aligned) , home home_widget_4 (text left aligned).

<div id="home_widget_1" class="grid col-300"> <div id="text-2" class="widget-wrapper widget_text"> <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/300.jpg" alt= ""></div> </div> </div><!-- end of .col-300 --> <div id="home_widget_2" class="grid col-620 fit"> <div id="text-3" class="widget-wrapper widget_text"> <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/620.jpg" alt= ""></div> </div> </div><!-- end of .col-620 fit --> <div id="home_widget_3" class="grid col-620"> <div id="text-4" class="widget-wrapper widget_text"> <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/620.jpg" alt= ""></div> </div> </div><!-- end of .col-620 --> <div id="home_widget_4" class="grid col-300 fit"> <div id="text-5" class="widget-wrapper widget_text"> <div class="textwidget"><img src="http://dev.gigiscucina.co.uk/wp-content/uploads/2014/10/300.jpg" alt= ""></div> </div> </div><!-- end of .col-300 fit -->

class="snippet-code-css lang-css prettyprint-override">.box { position: relative; width:300px; } .box p { position: absolute; bottom: 0; right: 0; background-color:rgba(0,0,0,0.75); color:#ffffff; padding:5px; } class="snippet-code-html lang-html prettyprint-override"><div class="box"> <img src="image.png" width="300" alt="" /> <p>this text go<br />change image size according div width</p> </div>

html css