Переход CSS3 для свойств «вверху» и «влево» не работает

У меня есть список, в котором один элемент в списке перемещается на северо-восток, когда я нахожу на него курсор. Переходы свойств margin-top и margin-left работали, но элемент, над которым наведен курсор, продолжал подталкивать другие элементы, поэтому я добавил position: relative и попытался использовать ] top и оставили свойства перехода , но, похоже, они не работали.

Вот jsfiddle:

list hover