縮略圖滾動文本

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

我想這是太多的樣式簡單的疊加效果，如果你有興趣看我從頭做了一個演示比在這裏你去

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; 

}