JQuery Overlay Opacity and Text Problem
<p>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. </p>

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

<p>Here's the HTML: </p>

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

<p>The div with the class set to portfolioMore is supposed to be displaying above the div overlay. </p>

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

<p>Thanks
Jacques</p>

<p>And here is the CSS: </p>

<pre><code>.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;

}
</code></pre>

<p>and the second CSS part: </p>

<pre><code>.overlay
{
    background-color:#000;
    opacity:0;
    display:none;
}
</code></pre>
