jQuery slideshow with url's in variable fade between images

I have created a jQuery based slideshow that lives within a DIV on my webpage. The only problem is the images have no transition effect between each other, just one to the next in a blink.

I would like to crossfade these images. What am I missing in my JS?

var urls = ['https://example.com/front.png',
 'https://example.com/interior-scaled.jpeg'];

  var count = 1;
  $('.hero').css('background-image', 'url("' + urls[0] + '")');
  setInterval(function() {
    $('.hero').css('background-image', 'url("' + urls[count] + '")');
    count == urls.length-1 ? count = 0 : count++;
  }, 6000);

});

LINK TO FIDDLE

from jQuery slideshow with url's in variable fade between images