Ora faremo aprire/chiudere due DIV con JavaScript:

  <div id="overlayer"></div >   che sarà quello che produce l' offuscamento della pagina master;

e:

  <div id="large_01"></div >   che sarà in primo piano con il Tag IMG che contiene, con la foto.

entrambi   position: absolute; display: none;
Mantener più istruzioni JS sui comandi (onClick), è possibile; ma istruire una funzione function è meglio, a questo punto.


function show(){
 
  document.getElementById("overlayer").style.display="block";
  document.getElementById("large_01") .style.display="block";

  }


Mentre al gestore d' evento (event handler)   onClick='show();'   si lascia richiamare la function per nome.
Istruiamo anche una simmetrica   function hide()   che provvederà alla ri-chiusura di entrambi i DIV.

Questo esempio può già essere una traccia sufficiente ad elaborare un progetto definitivo.
codice:
<html>
<head><title>overlaying DIVs</title>

<script type="text/javascript" language="javascript">
<!--

function show(){
 document.getElementById("overlayer").style.display="block";
 document.getElementById("large_01") .style.display="block";
 }

function hide(){
 document.getElementById("overlayer").style.display="none";
 document.getElementById("large_01") .style.display="none";
 }
//-->
</script>

</head>
<body bgcolor="#900000" text="#E3E3E3" link="#E3E3E3" alink="#E3E3E3" vlink="#E3E3E3" style="margin: 0;">

<h1>Home Page</h1>

<div align="center">
     

     
 Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII
</div>



<div id="overlayer" 
 style="display: none; position: absolute; top: 0px; left: 0px; 
        width: 100%; height: 100%; background-color: #000000;
        opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80);" 
 onClick='hide();'
>
</div>

<div id="large_01" 
  style="display: none; position: absolute; top: 50%; left: 50%; 
                                     margin-top: -200px; margin-left: -182px;
                                     border: 1px solid #800000; padding: ;
         width: 362px; height: ; background-color: #606060; color: white;" 
  onClick='hide();'
>
      <p align="right">Chiudi |X|</p>
      
      

      <div style="padding: 8px; color: #FFF;">Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII</div>
      
</div>


</body>
</html>
Notare un' altra minore modifica nel Tag BODY, con &#160; &#60;body style="margin: 0;"&#62; &#160; sono stati portati a zero pixel i margini che i Browser applicano di default al BODY (circa 8px sui quattro lati).
Questo per ovviare ad una diversa interpretazione data a &#160; width: 100%; &#160; del DIV di offuscamento dai diversi Browser:
- Netscape/Mozilla lo estendono per tutta la larghezza della finestra, a prescindere dal body margin;
- IExplorer invece considera il 100% al netto dei margini e ci ritrovavamo con un "pezzetto" scoperto.

Con l' XHTML come vedo il sito è impostato, non abbiamo per la centratura in altezza un equivalente del valign="middle" che si usa con le TABLE, così immediato nell' adattarsi al monitor.
Per la centratura in altezza della foto-DIV si ricorre a un gioco di coordinate top e left date in % percentuale, ed una correzione negativa pari alla metà della dimensione in pixel del DIV.
Lo stesso si può fare per la Larghezza.
Su questo tuttavia non mi dilungo; ti lascio a sperimentazioni isolate di CSS in merito.