You need to understand the CSS spec when it comes to the opacity property. The opacity rule is applied to an element and all children elements of that element. Moreover, no child element can have an opacity greater than their parent element.
For example:
<div style="opacity:0.6">
background
<div style="opacity: 1">
popup
</div>
</div>
In the above code, the popup div will still appear faded because it's opacity cannot exceed 0.6, the lowest opacity of it's ancestor elements.
The only way to make a child element appear more opaque than an ancestor, is to use positioning and trickery. Because there is no exception to the rule that children can have higher opacities than parents, you need to place 'children' outside of their 'parents' in the markup and then use some fancy CSS to position them as if they were children.
