CODEWITHSUNDEEP
jqueryhtmlcss
iPad
iPad

Reputation:

How To Overlay a Div on a Container with jQuery opacity

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!

Upvotes: 2

Views: 22369

Answers (4)

gargantuan
gargantuan

Reputation: 8944

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.

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22174

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 :)

Upvotes: 1

benmmc
benmmc

Reputation: 21

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.

Upvotes: 1

euge1979
euge1979

Reputation: 769

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.

Upvotes: 3

Related Questions