Comment obtenir un effet de fluidité fluide pour les transitions CSS lors du survol d'une image ?

Problème de transition CSS : facilité d'entrée mais pas facilité de sortie

Cette question concerne l'implémentation des transitions CSS pour les images. Lorsque vous survolez une image, celle-ci devient floue, mais lorsque la souris s'en va, elle revient brusquement à son état d'origine. Le comportement souhaité est que l’image sorte de l’effet de flou. De plus, la question explore la possibilité d'afficher du texte au survol en utilisant uniquement CSS.

Solution pour faciliter la sortie

Pour obtenir l'effet de facilité souhaité, modifiez le Paramètres de transition CSS en les appliquant à l'élément lui-même, plutôt qu'à la pseudo-classe :hover. Cela garantit que la transition a lieu à la fois lors du survol et lors du désactivation :

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

Ajout de texte au survol

Pour afficher du texte lors du survol d'une image en utilisant uniquement CSS , utilisez le pseudo-élément :after :

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

En suivant ces ajustements, l'image sortira de l'effet de flou lorsque le curseur de la souris part et le texte apparaîtra au survol.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!