html - 带有文本的缩略图翻转

Question

我正在使用以下 CSS 代码对文本进行翻转效果：

.thumb {
    position:relative;
}

.thumb img:hover {
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
}

.thumb:hover {
    background:#f00;
}

.thumb span {
    z-index:-10;
    position:absolute;
    top:10px;
    left:10px;
}

.thumb:hover span {
    z-index:10;
    color:#fff;
}

HTML 代码：

<div class="thumb">
    <a href="http://domain.com/"><img src="thumbnail.jpg" /></a>
    <span>Text</span>
</div>

除了当我将鼠标悬停在文本上时，一切都运行良好：翻转效果消失了，我可以再次看到图像。

有任何想法吗？

提前致谢

Answer 1

我想对于简单的叠加效果来说，样式太多了，如果你有兴趣看我从头开始制作的演示，那就去吧

演示

HTML

<div class="wrap">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <div class="overlay">Hello This Is So Simple</div>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.overlay {
    opacity: 0;
    background: rgba(0,0,0,.8);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity 1s;
    color: #fff;
    text-align: center;
}

.wrap:hover .overlay {
    opacity: 1;

}