transparent div over an image but opaque text

Question

I have the following HTML code which simply shows an image with a transparent black overlay containing text.

I don't wan't my text to be transparent. I tried with z-index, but my text is still transparent:

What's wrong with my code?

This is my HTML:

<div class="leftContainer">
    <div class = "promo">
         <img src="images/soon.png" width="415" height="200" alt="soon event" />

         <div class="hilight">
             <h2>Hockey</h2>
             <p>Sample text</p>
         </div>

     </div>

     ...

</div>

and this is my css:

.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;
}

Answer 1

Everything inside will have the opacity of 0.65. Move the text outside the overlay div.

Answer 2

For cross browser support use transparent 1x1 pixel png image to do this.
You can generate the image on this site: http://www.1x1px.me/
Then just remove background-color and opacity and simply use background:url(bg.png);

jsFiddle Live Demo

Answer 3

change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.

.hilight {
 background-color: rgba(0,0,0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana, Geneva, sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}

Answer 4

You need to set the opacity to the background only, not the entire div and it's contents. You can do this with rgba color selection eg

div {
   background: rgba(0,0,0,0.50);
}

The other way of doing it would be to use a semi-transparent png image with some background-position. This would then be multibrowser compatible