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 code：

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

除非我将鼠标悬停在文字上方，否则一切运作良好：翻转效果消失，我可以再次看到图像。

有什么想法吗？

提前致谢

Answer 1

我想这对于简单的叠加效果来说风格太多了，如果你有兴趣看到我从头开始做的演示而不是你去的那个

Demo

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;

}

带文字的缩略图翻转

1 个答案: