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

Apparently you are concerned that one hardcoded background color does not suit all dark, neutral and light backgrounds.

There is a relatively new CSS property called background-blend-mode which controls how two backgrounds are blended with each other. You can use this property to specify a blending mode that produces some contrast in all situations.

The downsides:

• Both image and overlay must be part of an element's background (mix-blend-mode is a better option with lesser support)
• The overlay color must be chosen stategically. In the following example I used transparent white instead of transparent black since difference filter does not affect black color.

.photo {
  position: relative;
  height: 200px;
  background-blend-mode: difference, normal;
}
.photo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font: bold larger/50px sans-serif;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-1 {
  background:
    linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
    url(https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg) center / cover;
}
.photo-2 {
  background:
    linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
    url(https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg) center / cover;
}
.photo-3 {
  background:
    linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
    url(http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg) center / cover;
}

<div class="photo photo-1"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-3"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Answer 2

• what about using text / box-shadow? You could apply a text-shadow with white or black, and or a box-shadow to your .tag class. This way there will be enough contrast.

• Another way would be, using the same Image as a background Image on the tag, and applying filter to it. (hue-rotate or brightness etc.)

• Something else that comes to my mind would be a calculation using canvas, to detect whether the bottom corner is dark or light, and adding another class to the .tag, so that you can use two versions. One for each type of background

• Lastly maybe blend-modes are an option: mix-blend-mode: difference;

Answer 3

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

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

Answer 4

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

}