Ho provato a sperimentare un po col tuo codice in maniera tale da capire ciò che ancora non conosco... In realtà non so bene cosa ho capito...
Andando per ordine:
.tutto:after dovrebbe inserire un elemento dopo .tutto. Quindi modificando questo in .tutto:before l'elemento in questione dovrebbe essere inserito prima degli altri contenuti. A noi in realtà cambierebbe poco in quanto la posizione di .txt cambia a seconda se il mouse sia sopra o meno.

Volevo però provare a far comparire gli elementi non da sotto ma da sopra e ho modificato il codice in questa maniera:

codice:
<head>    <title>Esempio</title>
    <meta charset="utf-8">
    <style>
      html,body{
        margin: 0;
        padding: 0;
        background: #445;
      }
      .tutto{
        width: 900px;
        position: relative;
        margin: 0 auto;
        background: gold;
      }
      .tutto:before{
        content: '';
        display: block;
        clear: both; /* Interrompe l'effetto del float applicato ai box. Evita che il contenitore collassi su se stesso */
      }
      .box{
        width: 280px;
        height: 280px;
        margin: 10px;
        float: left;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0,0,0,.1);
        transition: .4s;
      }
      .img{
        position: relative;
        width: 100%;
        height: 100%;
        background: #ffe;
      }
      .txt{
        position: relative;
        left: 0;
        top: 0;
        height: 40px;
        opacity: 0;
        color: #003;
        background: rgba(200,150,0,.3);
        text-align: center;
        transition: .4s;
      }
      .box:hover>.txt{
        top: -40px;
        opacity: 1;
      }
      .box:hover{
        box-shadow: 0 0 6px rgba(0,0,0,.5);
      }
    </style>
  </head>
  <body>
    <div class="tutto">
      <div class="container">
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            Ciao Ragazzi!
          </div>
        </div>
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            Funziona?
          </div>
        </div>
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            Prova
          </div>
        </div>
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            Uno
          </div>
        </div>
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            DUE
          </div>
        </div>
        <div class="box">
          <div class="img">
          </div>
          <div class="txt">
            TRE
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Il problema è che non cambia nulla.
Ti spiego cosa avevo nella mente in maniera tale da capire dove sia il mio errore e di conseguenza correggerlo...
In teoria modificando l'attributo bottom con top dovrei spostare il punto di ancoraggio [la distanza dell'origine del div] da sotto a sopra. Di conseguenza impostandola a -40px [va in giu non in su] non dovrebbe comparire da sopra?

Credo di aver sbagliato qualcosa...