Как сделать переходы в моей работе CSS

См. Скрипку: http://fiddle.jshell.net/whvSL/8/

Я хочу сохранить мои css-переходы в моем css.file и не применять какие-либо переходы с jQuery напрямую. Это так, что я держу код в чистоте, и есть четкий обзор.

Я прочитал, вероятно, более 10 блогов на эту тему и проверил множество ответов stackoverflow, которые объясняют, как это сделать, но все же я не могу заставить его работать для меня. Поэтому не отправляйте мне больше документации о том, как работают переходы вообще или ссылки на другие страницы stackoverflow, где они объясняют это, потому что это не помогает мне на этом этапе.

Мне нужно знать, где именно переходы идут в css. Почему они идут туда и почему моя версия не работает.

То, что я пытаюсь достичь, следующее: вы .mouseenter над боковой .mouseenter и эта боковая панель медленно превращается в цветную/перья внутри этой боковой панели медленно превращаются в цвет и текст.

Эффект от окрашивания от серого уже присутствует. Мне просто нужно знать, куда идет код перехода, включая все возможные предикаты verdor.

Сейчас он меняется от серого до цветного. Но я хочу, чтобы этот эффект происходил медленно! Заранее спасибо.