Chiaramente si può fare in vari modi, in genere per gestire un evento click è necessario l'uso di JavaScript, ma in questo caso si potrebbe anche tentare una soluzione in pure-css.

Dopo qualche prova ho messo su questo snippet:
codice:
<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
         .lavagna{
            width: 800px;
            height: 600px;
            position: relative;
            display: inline-block;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            background: silver;
            margin-bottom: 30px;
         }
         .lavagna>div{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 4px;
            opacity: 1;
            transition: .5s .2s;
         }
         .lavagna>div>img{
            max-width: 100%;
            max-height: 100%;
         }
         .lavagna>input{
            display: inline-block;
            position: relative;
            top: 100%;
            width: 30px;
            height: 20px;
            background: #48d;
            border-radius: 3px;
            border: 1px solid #999;
            -webkit-appearance: none;
               -moz-appearance: none;
                 -o-appearance: none;
                    appearance: none;
            cursor: pointer;
         }
         .lavagna>input:not(:checked):hover{
            background: #9ce;
         }
         .lavagna>input:checked~input{
            background: #eee;
         }
         .lavagna>input:checked~input+div,
         .lavagna>input:hover~input+div{
            visibility: hidden;
            opacity: 0;
         }
         .lavagna>input:not(:checked):hover+div{
            visibility: visible;
            opacity: .5;
         }
      </style>
   </head>
   <body>

      <div class="lavagna">
         <input type=radio name="livelli" checked> <div><img src="immagine1.png" alt=""></div>
         <input type=radio name="livelli">         <div><img src="immagine2.png" alt=""></div>
         <input type=radio name="livelli">         <div><img src="immagine3.png" alt=""></div>
         <input type=radio name="livelli">         <div><img src="immagine4.png" alt=""></div>
      </div>

   </body>
</html>
Chiaramente do per scontato che si tratti di immagini con trasparenza, dal momento che vuoi sovrapporle.

In sostanza c'è un semplice contenitore che ho chiamato "lavagna" (che richiama il concetto di lavagna luminosa, in cui puoi sovrapporre i lucidi); al suo interno andrai ad inserire delle righe formate ciascuna da un radio button e, a segure, un div con all'interno l'elemento <img>. Puoi quindi inserire quante immagini vuoi semplicemente aggiungendo una riga per ogni immagine da visualizzare.

Il sistema utilizza i radio button per poter visualizzare tutta la serie di immagini dalla prima a quella relativa al livello selezionato.

Il primo radio di norma dovrà essere impostato con l'attributo checked, che fa in modo di mostrare il primo livello all'apertura della pagina. Charamente si può impostare qualunque altro livello come checked; se nessun radio è impostato come checked, tutti i livelli saranno visibili all'apertura della pagina, come se fosse selezionato l'ultimo della serie.

Per selezionare un livello sulla pagina basta cliccare nei radio button, visibili come rettangolini colorati sotto la lavagna.
Tutti i radio da sinistra fino a quello selezionato, saranno evidenziati in blu, e le relative immagini saranno quindi visibili.

Ho inoltre prevvisto una ulteriore funzionalità per mostrare l'immagine in semi-trasparenza quando si passa semplicemente (senza cliccare) sul relativo radio, così da avere una "anteprima" del livello prima di selezionarlo.

Per il contenitore principale #lavagna sono impostate delle dimensioni fisse (all'inizio del css); è possibile chiaramente modificarne i valori a proprio piacimento, tenendo però presente che le immagini sono impostate per essere sempre contenute nei limiti di quelle stesse dimensioni impostate per la lavagna e centrate automaticamente all'interno di essa.

Vedi se può andarti bene, fai sapere.