title: transparent div over an image but opaque text
body: <p>I have the following HTML code which simply shows an image with a transparent black overlay containing text.</p>
  
  <p>I don't wan't my text to be transparent. I tried with <code>z-index</code>, but my text is still transparent:</p>
  
  <p><img src="https://i.stack.imgur.com/vDnTR.jpg" alt="Demo"></p>
  
  <p>What's wrong with my code?</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="leftContainer"&gt;
      &lt;div class = "promo"&gt;
           &lt;img src="images/soon.png" width="415" height="200" alt="soon event" /&gt;
  
           &lt;div class="hilight"&gt;
               &lt;h2&gt;Hockey&lt;/h2&gt;
               &lt;p&gt;Sample text&lt;/p&gt;
           &lt;/div&gt;
  
       &lt;/div&gt;
  
       ...
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css:</p>
  
  <pre><code>.hilight h2{
      font-family: Helvetica, Verdana;
      color: #FFF;
      z-index: 200;
  }
  
  .promo {
      position: relative;
  }
  .promo img {
      z-index: 1;
  }
  
  .hilight {
      background-color: #000;
      position: absolute;
      height: 85px;
      width: 415px;
      opacity: 0.65;
      font-family: Verdana, Geneva, sans-serif;
      color: #FFF;
      bottom: 0px;
      z-index: 1;
  }
  </code></pre>