html - 将鼠标悬停在图像上时显示带有半透明颜色叠加层的标题

Question

我使用以下代码在将鼠标悬停在图像上时显示带有半透明红色覆盖层的标题:

HTML:

<a href="http://www.domain.com/">
    <div class="thumb">
        <img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
        <div>
            <span>Caption</span>
        </div>
    </div>
</a>

CSS:

.thumb {
    position: relative;
}
.thumb div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fe0000;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb div span {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover div {
    opacity: 0.3;
}

此代码的问题在于标题也是半透明的。我想知道如何更改它以使标题不透明。

任何想法将不胜感激

Answer 1

你可以设置

background: rgba(255,0,0,0.3);

然后

opacity: 1;

在分区中

像这样:http://jsfiddle.net/EUUMX/