Плавный переход на jQuery

$(document).on('mouseover', '.nav-menu .nav-column', function(){
$(this).addClass('active').siblings().removeClass('active')
});

CSS transition криво работает для свойства background-image: при MouseOut в Хроме переход происходит скачком, в FF плавно не происходит вообще. Тогда как для background-color и opacity всё работает отлично (кроме IE младше 10). Можно протестировать в различных браузерах на этой demo.

Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена.

Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую:
HTML

<div id="cf">
  <img class="bottom" src="/images/img.jpg" />
  <img class="top" src="/images/img2.jpg" />
</div>

CSS:

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover { opacity:0;}