I have this page
and I want for each div to create this effect if the status of the ad is freez:
How can I add the semi transparent div? using z-index?
Hm, yeah, you could have an actual semi-transparent div, if you don't mind it not working on IE6/7 (you may not be supporting those anyway).
The div you want to cover over:
Since I don't know the markup, let's pretend that div has a class of "covered".
I would put the overlay semi-trans div inside covered.
Now the overlay is a child of the div you want to cover.
You would do something like
all your current css styles...
so that it becomes a positioned parent.
Now with the overlay we can
right: 0; /*mostly just for IE, it may not need this*/
width: 100%; /*100% of its parent, "covered"
height: 100%; /*100% of its parent... "covered may need to have an explicit height for this to work*/
Background with a colour with alpha channel might work better than opacity, otherwise you could instead do
Another option is, if you want that blue stamp to be there while the rest looks faded out, you could make an image with a semi-transparent greyish layer and the fully opaque stamp on top, flatten it to a 24- or 32-bit PNG and just have that be a background image of "overlay" which then will not have any opacity or rgba settings in the CSS.
This topic is now closed. New replies are no longer allowed.