Changing image in script with a transition effect

I am using this code:

<script>
    const body = document.querySelector("grayallbg");
    const li = document.querySelectorAll("span");
    

    li.forEach(el => {
        el.addEventListener("mouseover", () => {
            let bg = el.getAttribute("data-bg");
            grayallbg.style.background = `url(${bg})no-repeat center /cover`;
        });
    });
</script>

And it swaps fine, but I want it to ease in or fade.

I have tried to add a class, surround it with css selectors and I cannot target the images that swap.