如何在图像上添加半透明框并向右对齐？

Question

我想在图像上添加一个半透明的文本框，该框需要与右边对齐，并且还没有得到如何做到的线索，任何人都可以帮忙吗？

我在这里嘲笑了这个页面：http://dev.gigiscucina.co.uk/，截图如下。红色块只是占位符。

HTML如下。我希望能够在home_widget_2（文本右对齐）和home home_widget_4（文本左对齐）上添加半透明文本块。

<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 -->

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="box">
    <img src="image.png" width="300" alt="" />
    <p>this is where your text will go<br />change image size according to div width</p>
</div>

＆＃13;

＆＃13;

＆＃13;