Con i CSS da soli non si puo` fare. E` necessario un minimo di JS, che deve gestire gli eventi.

In quel tipo di effetti i CSS gestiscono le singole successioni in forma statica (cioe` se ci sono due situazioni, ci saranno due CSS (o due definizioni nello stesso CSS), mentre JS attribuisce l'una o l'altra agli stessi oggetti.

Per esempio.
Se vuoi che tutto diventi scuro, con una finestra chiara sovrapposta alla pagina, ci sara` una cosa del genere:
codice:
HTML:
<body>
  <div id="tutto_il_contenuto">
    ... qui la tua pagina normale ...
  </div>
  <div id="oscuramento">
    <div id="messaggio">
      

qui il testo del messaggio...</p>
    </div>
  </div>
</body>

CSS:
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#tutto_il_contenuto {
  position: absolute;
  z-index: 10;
  top:0; left:0;
  overflow: auto;
}
#oscuramento {
  position: absolute;
  z-index: 20;
  top:0; left:0;
  width: 100%
  height: 100%;
  display: none;
  background: url(sfondogrigio.png) repeat;   /* lo sfondo e` semitrasparente */
}
#messaggio {
  width: 400px;
  height: 300px;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
}
A questo punto e` compito del JS dare i due comandi:
document.getElementById('oscuramento').style.displ ay = 'block'; // viusalizza copertura oscura
document.getElementById('oscuramento').style.displ ay = 'none'; // elimina copertura oscura