Transparent div problem

Question

Hey i have this div that shows as a popup:

<div class="popup">
</div>

Then with jquery i add another class to it to give it with the css associated to that class, position, size, color and transparency:

.show {
    position: absolute;
    color: #F4F5F6;
    width: 600px;
    margin-left: -300px;
    height:300px;
    background: #000000;
    left:50%;
    top:200px;

    filter:alpha(opacity=95); 
    -moz-opacity: 0.95; 
    opacity: 0.95;
}

My problem is this:

I'm adding text and image to the div.

ending up like:

<div class="popup show">
    <div class="image">
      <img scr="blabla.png">
    </div>
    <div class="text">
      ble ble ble
    </div>
</div>

My problem is the following, even though i have overriden the opacity here:

div.image
{
    position: relative;
    float:left;
    width:202;
    height:402;
    filter:alpha(opacity=100); 
        -moz-opacity: 1; 
        opacity: 1; 
}

The image still apears with transparency.

Is there anyway to override the opacity values without having to put the image div outside of the popup div?

Answer 1

Try this:

div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100) !important; 
    -moz-opacity: 1 !important; 
    opacity: 1 !important; 
}

http://www.w3.org/TR/CSS2/cascade.html#important-rules

EDIT: sorry; I've even come across this before and didn't twig. I think that the nested element's maximum opacity is the same as the outer element's opacity; you can never get more opaque than your parent element! Last I checked this is a proper CSS issue, and I don't know a workaround.

As a workaround, you could try not making nested, but use some ucnning positioning trickery.

Answer 2

Since the '.show' class has an opacity of 95%, so will all of its descendants. It's unfortunate, but that's how opacity works. The descendants cannot overcome their ancestor's opacity as long as they still truly remain descendants.

You'll have to either set the '.show' background with a semi-transparent png or result to some awkward html (see: Non-Transparent Elements Inside Transparent Elements)

Not trying to be jerky, but this Google search (or something similar) might help