Comment obtenir des transitions fluides pour des images floues au survol avec CSS ?

Suppression des transitions CSS pour les images floues

Lors du survol d'une image avec la pseudo-classe CSS :hover, appliquer un filtre de flou à l'aide la propriété de filtre crée un effet visuellement attrayant. Cependant, il est courant d’observer que l’image revient brusquement à son état normal lors du retrait de la souris. Ce comportement peut être attribué à l'absence d'effet « d'assouplissement » pendant la phase de transition.

Pour résoudre ce problème et assurer une transition en douceur dans les deux sens, il est crucial d'appliquer les propriétés de transition au élément réel, plutôt que uniquement à la pseudo-classe :hover. Cela permet à la transition de se produire en douceur lors du survol de l'élément.

Exemple :

Considérez l'extrait de code suivant :

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

Cet exemple mis à jour montre comment l'application des propriétés de transition à la classe .img-blur au lieu de la pseudo-classe :hover produit une transition qui fonctionne dans les deux sens.

Améliorations supplémentaires :

Une autre exigence courante consiste à superposer du texte sur l'image floue lorsque la souris la survole. Bien que cela puisse être réalisé en utilisant JavaScript, les méthodes CSS offrent une solution plus efficace et plus légère. Voici comment :

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

Ce code introduit un élément .text-overlay, qui est masqué par défaut. Lors du survol de l'image, la pseudo-classe :hover s'active, rendant la superposition visible et l'alignant sur l'image floue. Cette approche offre un meilleur contrôle sur le style de la superposition de texte.

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!