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:

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
Post a Comment