I set up a nav menu that changes the body background when you hover the links. I’d like to add some easing to soften the transition. When I use just a background color, it works. When I switch it to an image, it doesn’t. To be clear, the image shows up but the transition does not. I can’t figure out why one works and one doesn’t.

Here’s the js and css I used –

<script>

var body = document.body;

var hover_element = document.getElementById("link1");

hover_element.addEventListener("mouseover", function() {
    body.style.backgroundImage = "url(my_image_url_is_here)";
});

</script>

body {
   transition: background-image 0.5s ease-in-out;
}