CSS3 transición altura que no trabaja

Question

tengo un problema con las transiciones CSS3 ¿Cómo puedo hacer la transición suave que aparece al instante
quiero que el cuadro div a cambiar poco a poco su altura cuando pasa sobre ella

la código html

<div id="imgs"> 

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" /> 
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" /> 
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" /> 
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" /> 
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" /> 
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" /> 
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" /> 
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" /> 

</div> 

jsfiddle

Answer 1

creo que es necesario establecer una altura especificada en lugar de automóviles. http://jsfiddle.net/BN4Ny/ esto hace una expansión suave. Sin embargo, no estoy seguro si querías ese pequeño efecto abierto. Simplemente bifurqué tu jsfiddle y agregué una altura específica.

Answer 2

Así es como puede hacerlo: http://jsfiddle.net/minitech/hTzt4/

Para mantener una altura flexibles, JavaScript es una necesidad, por desgracia.

Answer 3

En lugar de utilizar una altura establecida en un contenedor o usar JS (que son soluciones incómodas) ... Puede poner las imágenes en elementos de la lista y trabajar su transición en la li.

Si todas las imágenes van a una altura similar, significa que su contenido dentro del contenedor puede seguir siendo dinámico. Por ejemplo ...

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