Pessoal,

Estou querendo ter uma imagem com alguma opacidade onde ao fazer mouseover passa a ficar totalmente visivel e aparece um texto em cima.

Já consegui fazer o problema é que ao passar o rato por cima do texto a opacidade volta...

#image {
opacity: .4;
}

#image:hover {
opacity: .9;

}

#image:hover + #hover {
display: block;
color:transparent;

}


<div id="image"><img src="http://placekitten.com/200/" width="175" height="175" border="0"/></div>
<div id="hover"><div style="position:absolute; margin-top:-100px; text-align:center; width:175px;" ><font face="din" size="4">Gnosis</font></div></div>