title: CSS Styling a transparent div
body: <p>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.</p>
  
  <p>For the sake of testing I searched out 3 pictures and overlayed them with my div.</p>
  
  <h2>The question is, how would someone create this overlay layout, so it is discreetly and clearly visible at the same time?</h2>
  
  <p>The result is as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/CHlon.png" alt="Visibility good!"> <strong>Visibility good!</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Rdzrq.png" alt="Visibility bad"> <strong>Visibility bad</strong></p>
  
  <p><img src="https://i.stack.imgur.com/xTRmh.png" alt="Visibility bad"> <strong>Visibility okay, background visibility bad</strong></p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"&gt;&lt;/img&gt;
      &lt;div class="tag"&gt;Hello Tag&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"&gt;&lt;/img&gt;
      &lt;div class="tag"&gt;Hello Tag&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"&gt;&lt;/img&gt;
      &lt;div class="tag"&gt;Hello Tag&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>