Dans ce tutoriel, nous allons voir comment donner un effet lumineux en dégradé sur un bloc Groupe dans WordPress (Full Site Editing). L’objectif est d’obtenir un halo coloré qui apparaît au survol de la souris, avec une transition fluide à l’entrée et à la sortie.

Par défaut, un dégradé animé disparaît souvent brutalement dès que l’on quitte la zone, ce qui casse un peu l’esthétique. Avec quelques lignes de CSS bien pensées, nous allons corriger cela pour que l’effet reste élégant :

• apparition rapide du halo au survol,
• disparition douce et progressive quand on retire la souris,
• compatibilité avec le CSS additionnel de WordPress.

Résultat : vos blocs prennent vie avec un effet visuel moderne et dynamique, parfait pour mettre en valeur un encart, un appel à l’action ou une zone importante de votre page.

Sélectionner le groupe et dans réglage, cliquer sur Avancé : Classe(s) CSS additionnelle(s)
Ajouter : block-gradients

Code CSS

/*=======================
  Effet dégradé au survol
  ======================= */

.wp-block-group.block-gradients {
  position: relative;
  overflow: hidden;
  background: #172338;
  color: white;
  padding: 2rem;
  border-radius: 0px;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

/* Halo lumineux (transition fluide) */
.wp-block-group.block-gradients::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%; /* commence invisible */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,150,255,0.8), transparent);
  opacity: 0;
  filter: blur(6px);

  /* Transition fluide pour entrée ET sortie */
  transition: opacity 0.4s ease-in,
              height 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Au survol : halo animé qui descend */
.wp-block-group.block-gradients:hover::before {
  opacity: 1;
  height: 100%;
}

/* Ombre douce en bas */
.wp-block-group.block-gradients:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
}

/* Animation halo */
@keyframes halo-down {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}