<div class="expand">This cocntent may vary from 50px to 500px</div>
.expand{
max-width: 100px;
margin: 0 auto;
padding: 30px;
border-radius: 8px;
font-size: medium;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.expand {
max-height: 0;
}
.expand:hover {
background-color: green;
max-height: 500px;
transition: max-height 2s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.