Home/ Questions/Q 115851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T03:05:06+00:00

Hey i have this div that shows as a popup: <div class=popup> </div> Then

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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

    • 0