Transition for a background div that changes by writing src through js on hover

I am currently trying to implement the idea of having a container that holds 6 smaller containers 2×3 and when hovering over one of the containers the background-image of the whole site gets adapted. My current Implementation looks like the following:

HTML with Handlebars and Bootstrap

<div class="pictureCombContainer"></div>
<div class="produktion">
    <div class="row g-0 border-helper border-bottom border-top border-primary">
        {{#each produktion}}
            <div class="col-12 col-lg-6 border-helper-column border-top border-primary pictureComb p-2 d-flex {{#if (isEven @index)}}justify-content-lg-end{{else}}justify-content-lg-start{{/if}}" data-image-src="{{#if media_bild}}{{_media_img_src media_bild '&v=Original'}}{{/if}}">
                <div class="half-ultra-width-container">
                    {{> teaser-produktion}}
                </div>
            </div>
        {{/each}}
    </div>
</div>

CSS

.pictureCombContainer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: background-image 2s ease-in-out;
}

.pictureComb.darkmode:hover {
    background-color: rgb(0, 0, 0);
    transition: 1s;
}

.pictureComb.darkmode {
    background-color: rgba(0, 0, 0, 0.5);
    border: solid white 1px;
    height: 300px;
}

.pictureComb {
    background-color: rgba(255, 255, 255, 0.5);
    border: solid black 1px;
    height: 300px;
}

.pictureComb:hover {
    background-color: rgb(255, 255, 255);
    transition: 1s;
}

JS

$(document).ready(function() {
    $('.pictureComb').hover(function() {
        var imageSrc = $(this).data('image-src');
        
        if (imageSrc) {
            $('.pictureCombContainer').css('background-image', 'url(' + imageSrc + ')');
        }
    }, 
    
    function() {
        $('.pictureCombContainer').css('background-image', 'none');
    });
});

It works as intended the only problem I currently still have is that the change is abrupt and I cannot add a transition to it. My research brought me to the fact that “Directly transitioning the background-image property is not possible as background-image is not an animatable property.”.

I want to add that the only onHover effect is on the containers not on the element that gets the background Image inserted.

One Idea I had was to draw 6 additional pictureCombContainers that get the src from the loaded pictureCombs set by js upon onReady and then work with opacity. But I would like to ask if there are other ideas or solutions since mine seems too convoluted. Appreciate all help.