image popup over navbar links

I am trying to make the ghost image pop-in and pop-out every time I click on the link for each links. Now the ghost images are all visible over the links all I want is to click on the link and see the image to show up and disappear after that,for all links.

    <nav class="main-navbar">
        <ul class="main-navbar-list">
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 1</a>
            </li>
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 2</a>
            </li>
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 3</a>
            </li>
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 4</a>
            </li>
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 5</a>
            </li>
            <li class="main-navbar-link">
                <a href="#" class="main-navbar-item">link 6</a>
            </li>
        </ul>
    </nav>




    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.main-navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0;
    margin: 20px;
    font-size: 30px;
    font-weight: 500;
    background: #eee;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

}

.main-navbar-list {
    display: flex;
    width: 55%;
    justify-content: space-around;
}

.main-navbar-link {
    position: relative;
}

.main-navbar-item::before {
    position: absolute;
    content: "";
    top: -60%;
    left: 10%;
    background-image: url("https://icons8.com/preloaders/preloaders/1479/Ghost.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 70%;
}