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

Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.

If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}