/* ===================================================================== c-floating-photo.css (WS) ===================================================================== COMPOSANT : Photo flottante cliquable / décorative BUT --------------------------------------------------------------------- Ajouter une photo autour d’un élément : - menu WordPress - bouton - lien - titre - carte - bloc texte IMPORTANT LIEN --------------------------------------------------------------------- CSS ne peut pas créer un vrai lien avec une URL. Pour que la photo soit cliquable, elle doit être portée par un vrai . Dans un menu Gutenberg : - les classes peuvent être posées sur l’item de menu - ce fichier déplace automatiquement la photo sur le lien interne : .wp-block-navigation-item__content Résultat : - la photo est cliquable - elle renvoie vers la même URL que l’item du menu INSTALLATION --------------------------------------------------------------------- 1. Placer ce fichier dans : /assets/css/components/c-floating-photo.css 2. Le charger après les styles de base/header/navigation. 3. Dans Gutenberg, sur l’item de menu concerné, ajouter : ws-floating-photo ws-floating-photo--bottom ws-floating-photo--round ws-menu-photo-amandine OPTIONS RESPONSIVE --------------------------------------------------------------------- Cacher sur mobile : ws-floating-photo--mobile-hide Remonter au-dessus sur mobile : ws-floating-photo--mobile-top CONFIGURATION RAPIDE --------------------------------------------------------------------- Modifier dans .ws-menu-photo-amandine : - --ws-photo-url - --ws-photo-w - --ws-photo-h - --ws-photo-shift-x - --ws-photo-shift-y - --ws-photo-border-color - --ws-photo-border-hover-color ===================================================================== */ /* ===================================================================== 1) BASE ===================================================================== */ .ws-floating-photo{ position: relative; z-index: 1; --ws-photo-url: none; --ws-photo-w: 120px; --ws-photo-h: 120px; --ws-photo-gap-x: 12px; --ws-photo-gap-y: 12px; --ws-photo-shift-x: 0px; --ws-photo-shift-y: 0px; --ws-photo-radius: 999px; --ws-photo-opacity: 1; --ws-photo-size: cover; --ws-photo-position: center center; --ws-photo-repeat: no-repeat; --ws-photo-z: 2; --ws-photo-shadow: 0 8px 18px rgba(0,0,0,0.20); --ws-photo-border-w: 2px; --ws-photo-border-color: #043a57; --ws-photo-border-hover-color: #F26A21; --ws-photo-transition: border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease; } /* ===================================================================== 2) PHOTO GÉNÉRIQUE ===================================================================== */ .ws-floating-photo::after, .wp-block-navigation-item.ws-floating-photo > .wp-block-navigation-item__content::after{ content: ""; position: absolute; display: block; width: var(--ws-photo-w); height: var(--ws-photo-h); background-image: var(--ws-photo-url); background-size: var(--ws-photo-size); background-position: var(--ws-photo-position); background-repeat: var(--ws-photo-repeat); border: var(--ws-photo-border-w) solid var(--ws-photo-border-color); border-radius: var(--ws-photo-radius); opacity: var(--ws-photo-opacity); z-index: var(--ws-photo-z); box-shadow: var(--ws-photo-shadow); transition: var(--ws-photo-transition); } /* ===================================================================== 3) CAS MENU WORDPRESS : PHOTO CLIQUABLE ===================================================================== */ .wp-block-navigation-item.ws-floating-photo{ position: relative; overflow: visible; } /* On désactive la photo sur le
  • */ .wp-block-navigation-item.ws-floating-photo::after{ content: none !important; } /* On dessine la photo sur le vrai lien */ .wp-block-navigation-item.ws-floating-photo > .wp-block-navigation-item__content{ position: relative; overflow: visible; z-index: 1; } /* ===================================================================== 4) HOVER ===================================================================== */ .ws-floating-photo:hover::after, .wp-block-navigation-item.ws-floating-photo:hover > .wp-block-navigation-item__content::after{ border-color: var(--ws-photo-border-hover-color); box-shadow: 0 10px 22px rgba(0,0,0,0.28); } /* ===================================================================== 5) POSITIONS ===================================================================== */ .ws-floating-photo--bottom::after, .wp-block-navigation-item.ws-floating-photo--bottom > .wp-block-navigation-item__content::after{ top: calc(100% + var(--ws-photo-gap-y)); left: 0; transform: translateX(var(--ws-photo-shift-x)) translateY(var(--ws-photo-shift-y)); } .ws-floating-photo--top::after, .wp-block-navigation-item.ws-floating-photo--top > .wp-block-navigation-item__content::after{ bottom: calc(100% + var(--ws-photo-gap-y)); left: 0; transform: translateX(var(--ws-photo-shift-x)) translateY(var(--ws-photo-shift-y)); } .ws-floating-photo--left::after, .wp-block-navigation-item.ws-floating-photo--left > .wp-block-navigation-item__content::after{ right: calc(100% + var(--ws-photo-gap-x)); top: 50%; transform: translateY(-50%) translateX(var(--ws-photo-shift-x)) translateY(var(--ws-photo-shift-y)); } .ws-floating-photo--right::after, .wp-block-navigation-item.ws-floating-photo--right > .wp-block-navigation-item__content::after{ left: calc(100% + var(--ws-photo-gap-x)); top: 50%; transform: translateY(-50%) translateX(var(--ws-photo-shift-x)) translateY(var(--ws-photo-shift-y)); } /* ===================================================================== 6) ORDRE VISUEL ===================================================================== */ .ws-floating-photo--behind{ --ws-photo-z: -1; } .ws-floating-photo--front{ --ws-photo-z: 2; } /* ===================================================================== 7) FORMES ===================================================================== */ .ws-floating-photo--round{ --ws-photo-radius: 999px; } .ws-floating-photo--soft{ --ws-photo-radius: 18px; } .ws-floating-photo--square{ --ws-photo-radius: 0px; } /* ===================================================================== 8) CONFIG EXEMPLE : MENU AMANDINE ===================================================================== */ .wp-block-navigation .ws-menu-photo-amandine{ --ws-photo-url: url("/wp-content/uploads/2026/03/amandine-home-portrait.png"); --ws-photo-w: 90px; --ws-photo-h: 90px; --ws-photo-gap-y: 8px; --ws-photo-gap-x: 10px; --ws-photo-shift-x: 0px; --ws-photo-shift-y: 0px; --ws-photo-radius: 999px; --ws-photo-opacity: 1; --ws-photo-size: cover; --ws-photo-position: center center; --ws-photo-border-color: #043a57; --ws-photo-border-hover-color: #F26A21; --ws-photo-shadow: 0 8px 18px rgba(0,0,0,0.20); --ws-photo-z: 2; } /* ===================================================================== 9) RESPONSIVE ===================================================================== */ @media (max-width: 900px){ .ws-floating-photo--mobile-hide::after, .wp-block-navigation-item.ws-floating-photo--mobile-hide > .wp-block-navigation-item__content::after{ display: none !important; } } @media (max-width: 900px){ .ws-floating-photo--mobile-top::after, .wp-block-navigation-item.ws-floating-photo--mobile-top > .wp-block-navigation-item__content::after{ top: auto !important; bottom: calc(100% + var(--ws-photo-gap-y)) !important; left: 50% !important; transform: translateX(-50%) translateX(var(--ws-photo-shift-x)) translateY(var(--ws-photo-shift-y)) !important; } } /* ===================================================================== 10) DÉPANNAGE ===================================================================== Si la photo ne s’affiche pas : - vérifier l’URL de l’image - vérifier que les classes sont bien sur l’item - vérifier que le parent n’a pas overflow:hidden - tester temporairement : --ws-photo-z: 10; --ws-photo-w: 130px; --ws-photo-h: 130px; Si la photo n’est pas cliquable : - dans un menu Gutenberg, elle doit être sur un item de navigation - ce fichier la dessine sur le lien interne - elle renverra vers la même URL que l’item du menu Si tu veux une URL différente : - il faudra ajouter un vrai lien HTML dédié - CSS seul ne peut pas créer une URL différente ===================================================================== */