CSSでイメージにオーバーレイを追加しますか？

Question

私は下部にDIVをテキストで表示したいというイメージがあります。私はそれが本当に簡単だと知っていますが、これはモバイルウェブサイトであり、すべての画像がさまざまなサイズであるため、100％の幅ですべてをぼかして画像などを浮かせなければなりません。

これは私です今持っている：

HTML

<div class='individual_picture_capption_wrapper'> 
<div class='individual_picture_capption_wrapper_two'> 
<div class='individual_picture_caption_wrapper_three'><div class='individual_picture_caption'>Some Caption Here</div></div> 
<img src='http://myflashpics.com/get_image.php?short_string=8ibjr&size=big' class='individual_picture_big' /> 
</div> 
</div> 

CSS

.individual_picture_caption { 
    padding: 12px 10px 12px 10px; 
    font-size: 13px; 
    text-align: center; 
} 
.individual_picture_capption_wrapper { 
    position: relative; 
    background-color: #ffffff; 
} 
.individual_picture_capption_wrapper_two { 
    margin-left: 0px; 
    background-color: #cccccc; 
} 
.individual_picture_caption_wrapper_three { 
    float: left; 
    position:absolute; 
    width: 100%; 
    left: 0; 
    background-image: url('http://myflashpics.com/viewer/images/transparent_black_70.png'); 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    color: #ffffff; 
    margin: 15px 30px 15px 15px; 
} 

私の問題は、それが底に浮かび、キャプションが縁にぶら下がっていることです。私はそれが左の私の余白のためだと知っています。

助けてください！私はここからどこに行くべきか分からない。あなたが実際にそれを見たい場合は、click here。

ありがとうございます！

Answer 1

はマージンをスクラッチ。 bottom:15px;を追加し、width:auto; left:20px; right:10px

Answer 2

あなたはこのようにマージンや位置のためのあなたのCSSを変更する必要が下部にキャプションをしたい場合：

.individual_picture_caption_wrapper_three { 
    margin: 0 0 7px 7px; 
    bottom:0; 
}