Quote Originariamente inviata da dwb Visualizza il messaggio
Ti ringrazio, va bene, ma vorrei fare una cosa: se volessi mettere una scritta di fianco a ogni checkbox per far capire all'utente cosa seleziona? Ho provato, ma il testo va a finire all'interno della lavagna
Prego.
Gli elementi input hanno position:relative con top:100% per fare in modo che siano spostati sotto l'ingombro della lavagna, mentre i nodi di testo in questo caso non vengono spostati.

Per fare ciò che chiedi è necessario inserire i testi dentro dei contenitori (ad esempio degli span) in modo da poterli gestire col CSS.

Qui una rielaborazione del codice precedente:
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: 0;
            visibility: hidden;
            transition: .5s .2s;
         }
         .lavagna>div>img{
            max-width: 100%;
            max-height: 100%;
         }
         .lavagna>input,
         .lavagna>span{
            display: inline-block;
            position: relative;
            top: 100%;
         }
         .lavagna>input{
            margin: 3px 2px 3px 5px;
            width: 30px;
            height: 20px;
            background: #eee;
            border-radius: 3px;
            border: 1px solid #999;
            -webkit-appearance: none;
               -moz-appearance: none;
                 -o-appearance: none;
                    appearance: none;
            cursor: pointer;
         }
         .lavagna>span{
            margin-right: 5px;
            font: 12px sans-serif;
            vertical-align: super;
            cursor: default;
         }
         .lavagna>input:hover{
            background: #9ce;
         }
         .lavagna>input:checked{
            background: #48d;
         }
         .lavagna>input:hover+span+div{
            visibility: visible;
            opacity: .5;
         }
         .lavagna>input:checked+span+div{
            visibility: visible;
            opacity: 1;
         }
      </style>
   </head>
   <body>
      <div class="lavagna">
         <input type="checkbox" checked>  <span>Cover</span>      <div><img src="Cover.png" alt=""></div>
         <input type="checkbox">          <span>Colore 1</span>   <div><img src="Colore8016.png" alt=""></div>
         <input type="checkbox">          <span>Colore 2</span>   <div><img src="Colore9016.png" alt=""></div>
         <input type="checkbox">          <span>Colore 3</span>   <div><img src="Colore7035.png" alt=""></div>
         <input type="checkbox">          <span>Maniglia</span>   <div><img src="Maniglia.png" alt=""></div>
      </div>
   </body>
</html>
Vedi se può andare bene.