टेक्स्ट + div सीएसएस

Question

के साथ होवर पर विस्तार करें, मैं होवर div पर विस्तार बनाने की कोशिश कर रहा हूं, लेकिन यह समझ नहीं सकता कि सामग्री को div के साथ कैसे विस्तारित किया जाए। मैंने कुछ अतिप्रवाह विकल्पों को सूख लिया है, लेकिन यह काम नहीं किया।

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

यहाँ jsfiddle

किसी की मदद कृपया है:

यहाँ कोड है?

बहुत धन्यवाद।

Answer 1

.grow करने के लिए overflow: hidden जोड़ें।

इसके अतिरिक्त, <br /> टैग का उपयोग करने के बजाय, <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

बस अपडेट करें;

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

Answer 3

चेक अगर यह आप के साथ काम करता है।

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