Discrete and visible div over img/video

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

You can try to provide text-shadow with blur as shown in the image below, so this helps in getting a form of translucent background around the text.

Please try:- CSS3 Text Shadow Generator

text-shadow: 3px 0px 19px rgba(226, 150, 150, 1);

Answer 2

There are quite some options.

I'll skip the options that aren't applicable for your problem:

• apply text directly to image
• overlay entire image

Here are the useful ones:

1. Text in a box

This is the option you chose, you could tweak the opacity a bit so it's more readable on 'noisy' images.

Idea

2. Blur the part behind the text

3. Floor fade

A slight fading effect behind the text. Hint: Use a text shadow!

4. Scrim

This is an interesting one. It's a kind of gradiated box behind the text. It should not be noticeable but the text should be easier to read.

The floor fade's hint applies here as well.

Reference: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

Answer 3

@Vince was a huge help, ty for this great resource.

Solution I ended up doing:

https://jsfiddle.net/p89buajq/

I am still fiddling with the color but the concept is nice, ty everyone.