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
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
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.