css testo a comparsa

[malazzar]

ciao, sono nuova del mondo css, e consultando vari siti ho trovato un esempio di css che passando sopra ad una parola di visualizza una mascherina con un testo di approfondimento, non mi andavano bene alcune cose così ho inziato a modificarlo, non sono riuscita a far posizionare il testo di comparsa al di sopra della scritta in modo automatico rispetto la pagina (cioè non voglio posizionarlo digitando i px visto che i monitor sono di vari formati), dove sto sbagliando?
Senza speranza
digito qui di seguito il css....aiutatemi......

<style type="text/css">

.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.description img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.description:hover{
background-color: transparent;
}

.description:hover img{
border: 0px solid Black;
}

.description span{
position: absolute;
background-color: Gray;
padding: 0px;
left: auto;
visibility: hidden;
color: Black;
text-decoration: none;
width: 302px;
height: auto;
top: auto;
}

.description span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.description:hover span{ /*CSS for enlarged image*/
visibility: visible;
vertical-align: text-bottom;
top: auto;
left: auto; /*position where enlarged image should offset horizontally */
z-index: 300;
speed: slow;
}

</style>