Thumbnail rollover with text - html

Question

I'm using the following CSS code to do a rollover effect with 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">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance

Answer 1

I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you 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 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;
}