html - Thumbnail rollover with text -

i'm using following css code rollover effect text:

.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> 

everything working except when hover on text: rollover effect disappears , can see image again.

any ideas?

thanks in advance

i guess of styles simple overlay effect, if interested see demo i've made scratch here go

demo

html

<div class="wrap">     <img src="http://images.google.com/intl/en_all/images/logos/images_logo_lg.gif" />     <div class="overlay">hello 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;  }