CSS Styling a transparent div

Question

I have an video tag with an div displayed on top. The div is pretty nice looking and visible for the most part, only dark images are a bit problematic.

For the sake of testing I searched out 3 pictures and overlayed them with my div.

The question is, how would someone create this overlay layout, so it is discreetly and clearly visible at the same time?

The result is as follows:

Visibility good!

Visibility bad

Visibility okay, background visibility bad

---

.container{
    position: relative;
}

img{
    width: 100%;
    height: 100%;
}

.tag{
    position: absolute;
    bottom: 5px;
    right: 0;
    color: white;
    font-size: 48px;
    padding: 5px;
    
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;
    
    background-color: black;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

<div class="container">
    <img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>
<div class="container">
    <img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>
<div class="container">
    <img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"></img>
    <div class="tag">Hello Tag</div>
</div>

Answer 1

Although perhaps better suited for UX.SE, there are a couple of options I might offer.

Firstly, don't use opacity for the whole element, use a transparent background color to allow the white text to stand out.

Secondly, outlining the black(ish) tag in white (or a transparent white) will allow the element to be more visible on darker backgrounds but not affect those with lighter colors.

JSfiddle Demo

.tag{
    position: absolute;
    bottom: 5px;
    right: 0;
    color: white;
    font-size: 48px;
    padding: 5px;

    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-left-radius: 20px;

    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: -1px -1px 0px 0px rgba(255,255,255,0.3); 

}

Answer 2

IMHO, make the text white and add a drop shadow.

.tag {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.75)
}