In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here: ![yahoo mail while drag-hovering a file over it](https://i.stack.imgur.com/lEFuK.png)

The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.

With: 

```
#blueBox {
background-color: #FFD090;
opacity: 0.0;
}

```

If the msgContent is a child of blueBox:

```
<div id='msgBox'>
   <div id='blueBox'>
      <div id='msgContent'>
       ... all the message contents, buttons, etc.
      </div>
   </div>
</div>

```

and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.

If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.

I've tried rgba (<http://jsfiddle.net/mkasson/nJcxQ/19/>) like [here on SO](https://stackoverflow.com/questions/8464845/how-to-set-opacity-on-container-div-and-not-on-children-text), but it doesn't cover over the child elements.

Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.

Thanks!