How To Overlay a Div on a Container with jQuery opacity

Question

Hi, I have a Container with Opacity 0.3

$('#containerFeatured').css('opacity',0.3)

The fact is that when I try to overlay a DIV wrap with images the opacity takes the whole DIV. I tried with z-index but nothing happens.

My example here

Thank you!

Answer 1

When you specify the opacity of an element (i.e. div), that opacity will apply to its child elements too. An obvious way around this is to get your non-transparent content outside of the div and use CSS positioning.

Answer 2

Other than moving the child elements out and using positioning, You could also use a PNG that is 30% opaque as the background image of the container div, however then you gotta deal with IE6.

Answer 3

You could try this:

$(document.createElement('div'))
    .width($('#containerFeatured').width())
    .height($('#containerFeatured').height())
    .css({backgroundColor:'white', opacity:0.4, position:'absolute',left:0, top:0})
    .prependTo($('#containerFeatured'))
$('#containerFeatured').css('position','relative')

You may want to tweak height more, but essentially, will do the trick :)

Answer 4

I use an opaque png for the background, then apply Unit Interactives PNG fix

http://labs.unitinteractive.com/unitpngfix.php

I think that's the cleanest, simplest solution.