Salve a tutti, sto provando a realizzare un sito e in una delle pagine ho una sequenza di immagini (che fanno anche da link ad altre pagine) su cui volevo realizzare del tipo "mouse sull'immagine-immagine scura-titolo che compare".
A far diventare "opaca" l'immagine sono riuscito, non riesco però a far comparire un testo che si posizioni al centro della stessa. Vi allego i codici sperando che possiate darmi una mano (anche perché sono partito da un template e a volte ho un po' di difficoltà a capire cosa posso cambiare e come).

Grazie!

Codice della pagina:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="css/globalStyle.css" type="text/css" />
<link href="css/menuStyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='menu_jquery.js'></script>
<title>Pagina personale del Dott. C. Q.</title>
</head>

<body>


<div id="wrap">
  <div id="header">
    <div id="header-content">
      <h1 id="logo">C. <span class="gray">Q.</span></h1>
      <h2 id="slogan">Odontoiatra e protesista dentale</h2>
      
      
      <ul>[*]Home[*]News[*]Terapie[*]F.A.Q.[*]Link[*]Contatti[/list]
    </div>
  </div>
  
  
  <div id="content-wrap">
    <div id="content">
      <div id="main">
        <div class="post image-container">
        [img]images/terapie-img/diagnosi1.png[/img] [img]images/terapie-img/igiene1.png[/img] [img]images/terapie-img/paradontologia1.png[/img] [img]images/terapie-img/implantoprotesi1.png[/img] </div>
    </div>
    <div id="sidebar" >
      <div class="sidebox">
        <div id="cssmenu">
          <ul>
            <li class="active"><span>Home</span>
            <li class="has-sub"><span>Terapie</span>
              <ul>[*]<span>Diagnosi</span>[*]<span>Igiene</span>[*]<span>Paradontologia</span>[*]<span>Implantoprotesi</span>[*]<span>Pedodonzia</span>[*]<span>Estetica</span>[*]<span>Ortodonzia</span>[*]<span>Conservativa</span>[*]<span>Endodonzia</span>[*]<span>Chirurgia</span>[*]<span>Protesi</span>
                <li class="last"><span>Gnatologia</span>[/list]
            [*]<span>News</span>[*]<span>FAQ</span>[*]<span>Contatti</span>
            <li class="last"><span>Link</span>[/list]
        </div>
      </div>
      
      <div class="sidebox">
        <h1>Parole Sagge...</h1>
        

La bocca senza mascellari è come un mulino senza macina, e in molto maggior conto devesi tenere un dente che un diamante. </p>
        <p class="align-right">- Miguel de Cervantes</p>
      </div>
    </div>
    
     
    
     
  </div>
</div>


<div id="footer">
  <div id="footer-content">
    <div class="col float-left">
      <h1>Contatti</h1>
      

Indirizzo: via Gaetano Donizetti 7/B

        00198, Roma</a></p>
      

Numero di telefono: 06-84242234</p>
      

Indirizzo e-mail: <a href = "mailto:quarantaciro@gmail.com" >quarantaciro@gmail.com</a></p>
    </div>
    <div class="col float-left">
      <h1>Social Network</h1>
      <div> [img]images/fbicon.png[/img] facebook </div>
      <div> [img]images/twicon.png[/img] twitter </div>
    </div>
    <div class="col2 float-right">
      

 &copy; copyright 2013 Vee

        Design by: styleshout  
        Valid CSS | XHTML </p>
      <ul>[*]Home[*]Sitemap[*]RSS Feed[/list]
    </div>
  </div>
</div>
 


</div>
</body>
</html>