css3 height transition not working

Question

i have a problem using css3 transitions how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it<

Answer 1

This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.

This is made possible by using max-height property and setting its value to a high value.

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}