Transition sur image de fond au survol d'un lien

HTML

<div class="main-bg">
  <span class="bg-1 bg"></span>
  <span class="bg-2 bg"></span>
  <span class="bg-3 bg"></span>
  <a href="#" id="bg-1" class="trigger">Test</a>
  <a href="#" id="bg-2" class="trigger">Tata</a>
   <a href="#" id="bg-3" class="trigger">tutu</a>
</div>

SCSS

* {margin:0; padding:0;
  &,
  &:before,
  &:after {box-sizing:border-box;}
}
html,
body {height: 100%;}

.main-bg {position: absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url(https://www.alteo.fr/images/slideshow/lamy-1400.jpg); background-color:black;}

.bg {position: absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; transition:all 0.4s ease-out;}

.bg-1 {background-image:url(https://www.alteo.fr/images/slideshow/studylease-1400.jpg); }  
.bg-2 {background-image:url(https://www.alteo.fr/images/slideshow/fleursdenicolas-1400.jpg);}  
.bg-3 {background-image:url(https://www.alteo.fr/files/thumbs/portfolio/projects/header-bgd-image/portfolio-header-1400/visuel-ambiance-jouets-en-bois.jpg);}  

.is-visible {opacity:1; visibility: visible; transition:all 0.4s ease-out; z-index:4;}

.trigger {position: relative; z-index:4; display: inline-block; padding:0.5em 1em; text-decoration: none; background: tomato; color: white; font-family:sans-serif;}

JavaScript

$('.trigger').each(function() {
  var bg = $(this).attr('id');

  $(this).on({
    'mouseenter' : function() {
        $('.bg').removeClass('is-visible');
        $('.' + bg).addClass('is-visible');
    },
    'mouseleave' : function() {
     		$('.bg').removeClass('is-visible');
    }
  });
});