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.