Fading in a background image using javascript or css on hover

Question

I have so far been able to make it so that a background image in the body appears when the pointer is over the div. This has to have an animation that fades in. I've been trying to find a way around this but haven't been successful. I don't have any javascript experience.

enter code here
<script>


    changeBgImage = () => {
        document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
        console.log("working")




    }
    ogBgImage = () => {
        document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
        console.log("working")
    }


</script>

<style>
    body {
        background-image: url('../Images/Background/black.jpg');
    }
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
                    <img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
                        onmouseover="changeBgImage();" onmouseout="ogBgImage();">
                </a>
</body>