JQuery覆盖不透明度和文本问题

我有一个无序的列表显示了一堆标志块。当用户将鼠标悬停在任何徽标上时,我将使用div创建半透明覆盖,但在覆盖的顶部,我希望放置一些带按钮的文本。

一切都很好,但当我把鼠标悬停在项目上时,文本看起来像是在覆盖层后面。但是,如果我将覆盖不透明度设置为1(不透明),则文本显示得很好。要么就是文本采用了不透明度的覆盖。

这是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>

类设置为portfolioMore的div应该显示在div覆盖之上。

在半透明div上显示不透明div是否存在已知问题?还是我的代码有问题?

谢谢 雅克

这里是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;

}

第二个CSS部分:

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