Perdono... ci sto smanettando e ho capito qualche errore... chiedo scusa per aver scritto in preda all'ansia da comprensione!
No problem. Non capisco però se hai quindi risolto o se ti serve ancora aiuto.

Non so se sul forum si tratti anche l'argomento Wordpress...
Non in maniera specifica ma, nel caso di argomenti che riguardano in generale il mondo dei CMS, puoi postare nella relativa sezione CMS.

.tutto:after dovrebbe inserire un elemento dopo .tutto
Sì, più precisamente lo inserisce dentro .tutto ma dopo i suoi contenuti.
Ho usato questo sistema (uno dei vari clearfix hack) per risolvere il problema del float.
In genere, un sistema alternativo (e più pulito) può essere quello di impostare overflow:auto sull'elemento contenitore (in questo caso su .tutto).
Non ha comunque nulla a che fare con l'effetto del testo.
Ad ogni modo ci sono altri sistemi più odierni per disporre al meglio gli elementi. Vedi l'uso di flexbox. Puoi trovare varie guide e informazioni tra i link utili capitolo 9.

Mi sono reso conto che nel codice che ti ho postato sopra, alla fine (tra le prove che stavo facendo) ho postato quello con position:relative sui due div testo e immagine, anziché usare absolute sul testo come ti avevo indicato . Scusa per l'eventuale confusione creata.

Posto quindi il codice rivisto (come da indicazioni iniziali), usando inoltre overflow:auto e l'effetto di uscita dall'alto. Può esserti utile a capire meglio il meccanismo di funzionamento delle transizioni.
codice:
<!DOCTYPE HTML>
<html>
  <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;
        overflow: auto;
      }
      .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{
        width: 100%;
        height: 100%;
        background: #ffe;
      }
      .txt{
        position: absolute;
        width: 100%;
        left: 0;
        top: -40px;
        height: 40px;
        opacity: 0;
        color: #003;
        background: rgba(200,150,0,.3);
        text-align: center;
        transition: .4s;
      }
      .box:hover>.txt{
        top: 0;
        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>