Thumbnail rollover with text

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">
    <a href="http://domain.com/"><img src="thumbnail.jpg" /></a>
    <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;

}