How to add transparate div?

[scialom]

Hi

I have this page
http://screencast.com/t/L3JBrbf2Q9

and I want for each div to create this effect if the status of the ad is freez:
http://screencast.com/t/iseVW2ZzcqC

How can I add the semi transparent div? using z-index?

thanks

[Stomme poes]

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:
<div>
stuff inside
</div>

Since I don't know the markup, let's pretend that div has a class of "covered".

<div class="covered">
stuff inside
</div>

I would put the overlay semi-trans div inside covered.

<div class="covered">
stuff inside
<div class="overlay"></div>
</div>

Now the overlay is a child of the div you want to cover.

You would do something like

.covered {
all your current css styles...
position: relative;
}
so that it becomes a positioned parent.

Now with the overlay we can


.overlay {
position: absolute;
left: 0;
right: 0; /*mostly just for IE, it may not need this*/
top: 0;
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: rgba(51,51,51,0.2);
}

Background with a colour with alpha channel might work better than opacity, otherwise you could instead do
background-color: #333;
opacity: 0.2;

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.