JQuery Overlay Opacity and Text Problem

Question

Hi there,

I have an unordered list show a bunch of logos as blocks. When the user hovers over any logo I'm using a div to create a semi-transparent overlay, but on top of the overlay I would like to put some text with a button.

Everything is working fine, but when I hover over the item the text tends to look like it's behind the overlay. If however I set the overlay opacity to 1 (opaque) the text shows up just fine. Either that or the text is adopting the opacity of the overlay.

Here's the HTML:

<li class="portfolioElement pfe28">
    <div class="overlay"></div>
    <div class="portfolioMore">Click here for more information.</div>
    <div class="portfolioText">
            <h3 class="portfolioTitle">Company</h3>
        <p class="portfolioDescription">
        Description...
        </p>
        <p>Locations: Toronto - Canada, Brisbane - Australia</p>
        <p>Click here to see more</p>
    </div>
</li>

The div with the class set to portfolioMore is supposed to be displaying above the div overlay.

Is there any known problem with showing an opaque div over a semi-transparent div? Or is this a problem with my code somewhere?

Thanks Jacques

And here is the CSS:

.portfolioMore
{
    background: black url(Portfolio.png) -194px -704px;
    //height:46px;
    //width:46px;
    margin-left:0;
    margin-top:-65px;
    position:inherit;
    display:none;
    text-align:center;
    font-family:arial;
    font-size:9pt;
    color:white;
    opacity:1;
    -moz-opacity:1;

}

and the second CSS part:

.overlay
{
    background-color:#000;
    opacity:0;
    display:none;
}

Answer 1

Try explicitly setting the stacking order of your div's by setting position: relative on both of them and giving a z-index:

.portfolioMore {
    position: relative;
    z-index: 2;
    /* other css declarations */
}

.overlay {
    position: relative;
    z-index: 1;
    /* other css declarations */
}