миниатюрное опрокидывание с текстом

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> 

Все работает хорошо, за исключением, когда я парить над text: эффект опрокидывания исчезает, и я снова вижу изображение.

Любые идеи?

Заранее спасибо

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; 

}