tekst + div rozwiń po najechaniu myszą z css

Question

Próbuję utworzyć rozwinięcie w dymku div, ale nie mogę wymyślić, jak sprawić, aby zawartość została rozwinięta za pomocą elementu div. Wysuszyłem kilka opcji przepełnienia, ale to nie zadziałało.

Oto kod:

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

Oto jsfiddle

Czy ktoś może pomóc?

Wielkie dzięki.

Answer 1

Dodaj overflow: hidden do .grow.

Dodatkowo, zamiast używać znacznika <br />, należy zawinąć tekst w znaczniku <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

tylko aktualizacja;

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

Answer 3

Sprawdź z linku poniżej, czy to działa z wami.

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