AdamNYC AdamNYC - 10 days ago 6
CSS Question

How to grey out a box in CSS

I have an element #messages-box, which include title, body, sender, avatar and excerpt. Now, I would like to grey out all elements in #message-box.

I know I can set properties of each of elements to make them all grey. But is there a way so that I can just change properties of #message-box?

All I need is something like a grey veil covers #message-box.

Thank you.

Answer

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

EDIT: A nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.