html - transparent div over an image but opaque text -


i have following html code shows image transparent black overlay containing text.

i don't wan't text transparent. tried z-index, text still transparent:

demo

what's wrong code?

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

change background of .hilight rgba(0,0,0,0.65) , remove 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; } 

Comments

Popular posts from this blog

php - Dynamic url re-writing using htaccess -

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -