:hover problème de scintillement

Bonjour,

Je suis en train de personnalisé un site Wordpress et je travaille sur le thème enfant.
J'ai créer une petite bannière, et je veux qu'au survol de celle-ci, un filtre avec un lien apparaisse.
Le problème c'est que ça scintille lorsque je fais le :hover.
Est-ce que vous aurez une solution ? je me casse la tête depuis ce matin

Merci beaucoup

<div class="imgActivite">
    <figure class="wp-block-image"><img src="http://formationwordpress/wp-content/uploads/2019/01/football-banniere-1.jpg" alt="football sport banniere" class="wp-image-273">
    </figure>
    <div class="overlay"></div>
</div>

.imgActivite{
  position: relative;
}
.overlay{
  height: 200px;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,128,128,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.overlay a{
   color: white;
   background-color: rgba(0,128,128,0.6);
   text-transform: uppercase;
   font-size: 1.5em;
   padding: 20px;
   border: 2px solid white;
   border-radius: 5px;
   font-weight: bold;
}

figure:hover +.overlay{
  visibility: visible;
}

Et l'eau,

Attention au comportement du flux par la suite (pense à une image par défaut ou à un min-height sur imgActivite).

Pourquoi as tu ce scintillement ?
Ton erreur vient entres autres du fait que tu n'as pas su déterminer un bon sélecteur. Tu déclares : Tant que la souris est sur l'élément figure, s'affiche un élément voisin. Cet élément est au dessus de figure. tu le fais disparaître lorsque la souris n'est plus sur l'élément figure, Tant que la souris est sur l'élément figure, s'affiche un élément voisin. Cet élément est au dessus de figure. tu le fais disparaître lorsque la souris n'est plus sur l'élément figure, Tant que la souris est sur l'élément figure, s'affiche un élément voisin. Cet élément est au dessus de figure. tu le fais disparaître lorsque la souris n'est plus sur l'élément figure, Tant que la souris est sur l'élément figure, s'affiche un élément voisin. Cet élément est au dessus de figure. tu le fais disparaître lorsque la souris n'est plus sur l'élément figure....

Je t'invite à me lire :

.imgActivite{
  position: relative;
}
.imgActivite img{
  display:block;
}
.imgActivite .overlay{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,128,128,0.6);
  visibility: hidden;
}

.imgActivite:hover .overlay{
  visibility: visible;
}

Modifié par niuxe (11 Jan 2019 - 00:40)