Il codice riporta diversi errori di validazione; dandoti dei consigli su come intervenire per il problema in questione, può anche essere che i risultati siano inconsistenti a causa di tali errori.

In qualunque caso sarebbe meglio lavorare su un codice valido.

Prima di proseguire ti consiglio quindi di iniziare col validare l'intero codice. Puoi usare questo validatore online e cercare di correggere tutti gli errori che ti vengono segnalati analizzando il tuo codice.

Se hai bisogno di aiuto a capire come risolvere determinati errori, puoi chiedere sempre su questa discussione.

Ad ogni modo...

ora però, oltre a quanto fatto, vorrei poter mettere a questo div una transizione che permetta al div di allungarsi solo verso il basso fino a permettere la visualizzazione del resto del testo al suo interno, questo ovviamente deve avvenire solo al passaggio del mouse sul div e deve rimanere aperto fin quando non tolgo il puntatore da sopra.
Uno dei possibili problemi del div in questione è che non ne conosco le dimensioni perchè sono dovute a quanto scritto in percentuale nel grid template .box
in questo caso è possibile che il solo CSS non sia sufficiente ad ottenere ciò che chiedi; eventualmente si potrebbero trovare delle soluzioni con l'ausilio di un po' di JavaScript... ma, ripeto, sarebbe bene partire da un codice validato.