Css3 высота перехода не работает

У меня проблема с использованием css3-переходов как я могу сделать переход гладким, он появляется мгновенно
я хочу, чтобы поле div медленно меняло свою высоту, когда я наводил на нее надпись

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

Ответ 1

Я считаю, что вам нужно установить заданную высоту вместо auto. http://jsfiddle.net/BN4Ny/, это делает плавное расширение. Не уверен, что вы хотите, чтобы этот небольшой эффект был закрыт. Я просто разветкил ваш jsfiddle и добавил указанную высоту.

Ответ 2

Вот как вы можете это сделать: http://jsfiddle.net/minitech/hTzt4/

Чтобы сохранить гибкую высоту, к сожалению, JavaScript является необходимостью.

Ответ 3

Вместо того, чтобы использовать высоту набора на контейнере или использовать JS (которые являются как неудобными решениями)... Вы можете поместить изображения в элементы списка и выполнить свой переход на ли.

Если все изображения соответствуют одинаковой высоте, это означает, что ваш контент внутри контейнера может быть динамическим. Например...

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