text + div expand on hover with css

Question

Sto provando a creare un'espansione sul div hover, ma non riesco a capire come ampliare il contenuto con il div. Ho asciugato alcune opzioni di overflow, ma non ha funzionato.

Ecco il codice:

<div class="grow" style="background-color: #2a75a9;"> <h2>Title</h2> </br> 
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div> 

.grow { 
    padding: 5px 5px 5px 5px; 
    border-radius:10px; 
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center; 

} 
.grow:hover { 
    height: 115px; /* This is the height on hover */ 
} 

Ecco la jsfiddle

qualcuno può aiutarmi?

Molte grazie.

Answer 1

Aggiungi overflow: hidden-.grow.

Inoltre, anziché utilizzare il tag <br />, racchiudere il testo in un tag <p>.

.grow { 
 
    padding: 5px 5px 5px 5px; 
 
    border-radius: 10px; 
 
    height: 49px; 
 
    width: 22%; 
 
    margin: 5px 1% 5px 1%; 
 
    float: left; 
 
    position: relative; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
.grow:hover { 
 
    height: 145px; 
 
}

<div class="grow" style="background-color: #2a75a9;"> 
 
    <h2>Title</h2> 
 
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p> 
 
</div>

Answer 2

solo aggiornamento;

.grow:hover { 
    height: auto; /* This is the height on hover */ 
} 

Answer 3

Verificare con il link qui sotto se funziona con te.

https://jsfiddle.net/gknLstpt/9/

.grow { 
    padding: 5px 5px 5px 5px; 
    border-radius: 10px; 
    height: 49px; 
    width: 15%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    text-align: center; 
    overflow: hidden; 
} 
.grow:hover { 
    height: 145px; 
    width: 145px; 
}