Text + div erweitern auf Hover mit CSS

Question

Ich versuche, eine Erweiterung auf Hover div zu erstellen, aber kann nicht herausfinden, wie man den Inhalt mit dem div zu erweitern. Ich habe ein paar Überlaufoptionen getrocknet, aber es hat nicht funktioniert. Hier

ist der Code:

<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 */ 
} 

Hier ist die jsfiddle

Kann jemand bitte helfen?

Vielen Dank.

Answer 1

overflow: hidden zu .grow hinzufügen.

Fügen Sie den Text anstelle des Tags <br /> zusätzlich in ein <p>-Tag ein.

.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

nur aktualisieren;

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

Answer 3

Erkundigen Sie sich bei den folgenden Link, wenn es mit Ihnen arbeitet.

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; 
}