//overlay-image
function topicOverlayAnimation() {
    var topic = document.querySelector(".container")
    var fixed = document.querySelector("#overlay-image")
    topic.addEventListener("mouseenter", function () {
        fixed.style.display = "block"
    })
    topic.addEventListener("mouseleave", function () {
        fixed.style.display = "none"
    })

    var topicHead = document.querySelectorAll(".topic")
    topicHead.forEach(function (e) {
        e.addEventListener("mouseenter", function () {
            var image = e.getAttribute("data-image")
            fixed.style.backgroundImage = `url(${image})`
        })
    })
}
topicOverlayAnimation()
//
