Question

I created a small lightbox script, the script itself works fine but the problem is that the lightbox class which is filling up the whole screen needs to be translucent and if I make it that, the lightbox-image becomes translucent as well. I tried adding opacity: 1; to the lightbox-image but it didn’t work. Can you help?

The HTML looks like this:

<div class="lightbox">
    <div class="lightbox-image">
        <p>Something here</p> 
    </div>
</div>

CSS:

.lightbox {
    display: none;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
    z-index: 1000;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.lightbox-image {
    position: fixed;
    display: none;
    width: 600px;
    text-align: center;
    z-index: 1001;
    background-color: #000;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;   
}

Answer 1

You can’t because the parent has opacity:0.9 , so all the children will inherit this property (and you can’t assign different opacity to children). You could use as background-color an rgba i.e.

.lightbox
{
    display:none;
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    z-index:1000;
}

…and, as a fallback (i.e. for IE 😀 ) a transparent repeated 1px image