Bonjour,

Aujourd'hui je fais appelle à vous tous car j'ai un gros soucis de CSS. Je ne suis pas un grand fan d'intégration donc je n'ai jamais poussé la chose, seulement aujourd'hui, j'ai besoin de réaliser un menu assez complexe (du moins pour moi ahah).

En fait, j'aimerai faire un menu dans le même esprit que ce site : https://www.66nord.com/.

Donc pour la structure je n'ai pas vraiment eu de problème MAIS, arriver au moment de l’animation/transition, catastrophe... de quoi rendre épileptique.

Voici le code : 

<div class="container container-header">
        <header>
            <div class="header-top">
                <a class="link-header-home" href=http://127.0.0.1:8000/><img class="img-fluid img-logo-header" src="{{ asset('images/logo-header.png') }}" alt=""></a>
                <nav class="navbar menu-header">
                    {% for page in pages %}
                        <a  class="nav-link link-header-{{ page.title | lower }}" href="{{ path("display_page", {'page':page.slug}) }}">{{ page.title | upper }}</a>
                    {% endfor %}
                </nav>
            </div>
        </header>
    </div>


    <div class="header-bot">
        <div class="header-sub sub-home">
          DIV qui est visible dans le header quand on arrive sur le site
        </div>

        <div class="header-sub sub-expertise">
            <h1 class="title-test">Expertise</h1>
        </div>

        <div class="header-sub sub-performance">
            <h1 class="title-test">Performance</h1>
        </div>

        <div class="header-sub sub-innovation">
            <h1 class="title-test">Innovation</h1>
        </div>

        <div class="header-sub sub-proximité">
            <h1 class="title-test">Proximité</h1>
        </div>

        <div class="header-sub sub-engagement">
            <h1 class="title-test">Engagement</h1>
        </div>

    </div>

J'ai donc besoin qu'au survol d'un lien, le div adéquat (pour le lien proximité -> apparition de la div sub-proximité).

Voici mon code CSS :

.sub-home {
    visibility: visible;
    opacity: 1;
    background-image: url("../images/background-menu/bg-1.jpg");
    background-size:cover;
    filter: contrast(100%) blur(0px);
    animation-timing-function: ease-in;

}
.sub-expertise {
    visibility: hidden;
    opacity: 0;
    background-image: url("../images/background-menu/bg-4.jpg");
    background-size:cover;
    filter: contrast(100%) blur(0px);
    animation-timing-function: ease-in;
}
@keyframes bg-header {
    from {
        filter: blur(1px) grayscale(60%);
    }
    to {
        filter: blur(0px) grayscale(0%);
    }
}

Je n'en met ici que deux, mais tous les autres "sub-*" sont identiques à sub-expertise juste l'image change.

et voici mon code JS :

$('.link-header-expertise').hover(function () {
            $('.sub-expertise').css({
                "visibility":"visible",
                "opacity":"1",
                "animation-name":"bg-header",
                "animation-duration":"1s"
            });

            $('.sub-home').css({
                "visibility":"hidden",
                "opacity":"0",
                "animation-name":"",
                "animation-duration":""
            });

            $('.sub-performance').css({
                "visibility":"hidden",
                "opacity":"0",
                "animation-name":"",
                "animation-duration":""
            });

            $('.sub-innovation').css({
                "visibility":"hidden",
                "opacity":"0",
                "animation-name":"",
                "animation-duration":""
            });

            $('.sub-proximité').css({
                "visibility":"hidden",
                "opacity":"0",
                "animation-name":"",
                "animation-duration":""
            });

            $('.sub-engagement').css({
                "visibility":"hidden",
                "opacity":"0",
                "animation-name":"",
                "animation-duration":""
            });
        });

 Je ne met qu'un exemple ici, mais le principe est le même pour les 6 div.

Voilà, malheureusement, la transition est trop choque, et je ne vois pas comment faire pour avoir une transition douce qui ne va pas agresser l'utilisateur. J'aimerai donc savoir si l'un de vous peut m'aiguiller dans la bonne direction, ou m'aider à trouver une meilleure idée que la mienne ce qui à mon avis ne devrait pas être très dur 

Merci d'avance, pour votre aide.

(et désolé pour le doublon, il y a eu un bug, et je ne peux pas modifier mon autre sujet )