Effet de survol sur le bloc Groupe

Dans ce tutoriel, nous allons apprendre à créer un effet CSS moderne au survol d’image avec l’éditeur de site WordPress (FSE). L’objectif est d’ajouter un overlay animé en demi cercle qui affiche un texte ou une icône lorsque l’utilisateur passe la souris sur une image.

L’effet est :

100 % responsive (s’adapte aux mobiles et tablettes)
personnalisable
cliquable sur tout le bloc
sans plugin, uniquement avec des blocs WordPress et un peu de CSS

Cet effet est idéal pour mettre en valeur vos services, vos produits ou vos articles en créant des cartes interactives élégantes et engageantes.

Structure du groupe dans un bloc de 2 colonnes

Sélectionner le groupe et dans réglage, cliquer sur Avancé : Classe(s) CSS additionnelle(s)
Premier groupe ajouter : hover-card-circle
Deuxième groupe ajouter : hover-overlay

Code HTML avec lien interne : remplacer le # par votre lien

<a href="#" class="hover-link"></a>

Code HTML avec lien externe : remplacer le # par votre lien

<a href="#" target="_blank" rel="noopener noreferrer" class="hover-link"></a>

Code CSS

/* =================================
   Efet de survole fluide sur groupe
   ================================= */

/* Bloc principal */
.hover-card-circle {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hover-card-circle img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 1;
}

/* Cercle en bas */
.hover-card-circle .hover-overlay {
  position: absolute;
  left: 50%;
  bottom: -50%; /* caché au départ */
  transform: translateX(-50%);
  width: 100%;
  height: 50%;
  background: rgba(0, 120, 200, 0.9); /* 🎨 change la couleur ici */
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 2;
  padding: 1rem;
  color: #fff;
}

/* Contenu à l'intérieur du cercle */
.hover-card-circle .overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hover-card-circle .overlay-content svg {
  width: 36px;
  height: 36px;
}

.hover-card-circle .overlay-content p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Lien invisible couvrant tout */
.hover-card-circle .hover-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
}

/* Effet hover */
/*.hover-card-circle:hover img {
  transform: scale(1.1);
}*/

.hover-card-circle:hover .hover-overlay {
  bottom: 0;
  opacity: 1;
}

Si vous ne souhaitez pas l’effet demi-cercle et préférez un effet droit, supprimer :

  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;

Voir le tutoriel sur YouTube.