Bild in Box mit halbtransparentem Hinweistext

HTML

<div class="infobox">
    <div class="info">
        Hier kommt ein toller Hinweistext hin!
    </div>
</div>

CSS

div.infobox {
    background: url("http://lorempixum.com/400/300/");
    width: 400px;
    height: 300px;
    border: 1px solid #666;
    position: relative;
    box-shadow: 1px 1px 2px #666;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

div.info {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    
    /* Für den IE8 und drunter*/   filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#7f000000,endColorStr=#7f000000);
    color: #fff;
    padding: 15px;
}

        html {padding: 20px 0; background-color: #efefef; font-size: 100%;}
        body {width: 80%; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif;padding: 40px;  }