Comment ajouter une animation de révélation CSS à vos images —

Dans cet article, nous allons explorer quelques astuces CSS qui nous permettent de créer une animation de survol pour révéler nos images.

Nous pourrions penser « Eh bien, c’est une tâche facile ! Un élément supplémentaire au-dessus de l’image que vous animez et le tour est joué. C’est vrai, mais nous n’utiliserons aucun élément ou pseudo-élément supplémentaire. Nous allons travailler en utilisant uniquement le <img> élément. Rien de plus!

Cela peut sembler impossible car, en utilisant uniquement l’élément image, nous ne pouvons pas avoir quelque chose au-dessus. En effet, nous n’aurons rien au-dessus, mais nous ferons semblant !

Vous trouverez ci-dessous une démo CodePen de ce que nous allons explorer ensemble.

Voir le stylo
Un effet de survol de révélation avec un élément par les Amis d’Afif (@t_afif)
sur CodePen.

Cool, non ? Une animation de révélation utilisant seulement quelques lignes de code et aucun élément supplémentaire. Suivez-moi, et disséquons la magie derrière le code.

La configuration initiale

Commençons par définir la taille de l’image :

img {
  --s: 200px; 

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

Rien de complexe pour l’instant. Nous utilisons une image carrée pour plus de simplicité, mais il peut s’agir d’une image de n’importe quelle dimension. Il est important de définir explicitement width et height et ne pas utiliser aspect-ratio ou laissez la taille par défaut de l’image. C’est obligatoire pour notre animation, et nous verrons pourquoi plus tard.

Notez l’utilisation de box-sizing: border-box ainsi, ce qui est également important. Cela n’a aucun effet pour le moment, mais passons à l’étape suivante pour comprendre pourquoi c’est nécessaire.

Ajouter du rembourrage

Que se passera-t-il si nous ajoutons du rembourrage à une image où nous avons défini une dimension fixe et que nous avons utilisé box-sizing: border-box? Essayons!

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

L’image est écrasée, comme nous pouvons le voir dans la démo ci-dessus. Nous ajoutons 100px de rembourrage à gauche, qui ne laissera que 100px d’espace pour l’image (la zone de contenu). C’est l’effet de box-sizing: border-box.

Comme expliqué par MDN:

border-box indique au navigateur de tenir compte de toute bordure et remplissage dans les valeurs que vous spécifiez pour la largeur et la hauteur d’un élément. Si vous définissez la largeur d’un élément sur 100 pixels, ces 100 pixels incluront toute bordure ou remplissage que vous avez ajouté, et la zone de contenu se rétrécira pour absorber cette largeur supplémentaire.

Maintenant, imaginez une situation où le rembourrage est égal à la largeur. Oui, l’image va disparaître ! Dans la démo ci-dessous, survolez l’image et voyez le résultat.

Voir le stylo
Animer le rembourrage par les Amis d’Afif (@t_afif)
sur CodePen.

Il y a deux choses en particulier à noter dans la démo ci-dessus. Le rembourrage peut être animé, ce qui est cool, et nous pouvons voir l’importance de la variable CSS que nous avons utilisée précédemment pour définir la taille de l’image. Nous avons utilisé la même variable pour définir le rembourrage, nous n’avons donc pas à répéter la même valeur.

Ajout d’une couleur d’arrière-plan

Prenons l’exemple précédent et ajoutons-y un arrière-plan.

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

Nous commençons à aller quelque part maintenant. Le fond couvrira logiquement l’ensemble de l’élément. Nous ne le voyons pas sous l’image (sauf si nous en utilisons un avec transparence), mais nous le voyons sur la zone de rembourrage.

Notre objectif est de révéler l’image, alors commençons par avoir le rembourrage, puis faisons-le 0 en vol stationnaire – le contraire de ce que nous avons actuellement.

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

Ce n’est toujours pas notre objectif, mais nous nous en rapprochons ! Il ne nous manque qu’un seul ingrédient pour que notre « fausse » animation de révélation soit parfaite !

Ajout d’ajustement d’objet et de position d’objet

La partie manquante est d’éviter l’écrasement de l’image, et voici la dernière astuce. Nous allons utiliser object-fit avec le cover valeur.

Comme expliqué par MDN:

Le contenu remplacé est dimensionné pour conserver ses proportions tout en remplissant la totalité de la zone de contenu de l’élément. Si le rapport d’aspect de l’objet ne correspond pas au rapport d’aspect de sa boîte, alors l’objet sera coupé pour s’adapter.

Deux parties sont importantes ici :

• « Le contenu remplacé est dimensionné pour conserver son rapport hauteur/largeur ». Cela signifie que l’image ne sera pas écrasée mais conservera son rapport intrinsèque. Nous avons utilisé une image carrée, elle restera donc carrée.
• « remplir la totalité de la zone de contenu de l’élément … sera coupé pour s’adapter ». L’image doit remplir toute la zone de contenu (la zone que nous réduisons en ajoutant du rembourrage), mais si elle ne rentre pas à l’intérieur, nous la découpons.

Essayons cela dans la démo suivante.

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

Regarde ça? L’image n’est plus écrasée ! Il garde son ratio à l’intérieur de la zone de contenu pendant que nous ajoutons/supprimons le rembourrage.

D’accord, nous pensons peut-être que l’effet n’est pas le même que dans la démo initiale. L’image bouge étrangement. Vrai. Alors maintenant, nous nous tournons vers object-position. La valeur par défaut est center, ainsi l’image sera centrée dans la zone de contenu tout le temps et sera coupée pour tenir à l’intérieur. C’est pourquoi il bouge avec l’animation.

Ce que nous ferons ensuite devrait être facile à prévoir. Nous allons changer la position pour nous assurer que l’image ne bouge pas. Nous allons ajouter le rembourrage à partir de la gauche, nous devons donc fixer la position de l’image à droite en utilisant object-position: right.

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

Notre animation de révélation est terminée ! Nous n’avons pas eu besoin de superposition ou d’un élément supplémentaire au-dessus de l’image. En utilisant une simple couleur d’arrière-plan, ainsi que quelques astuces de positionnement pour l’image, nous obtenons une animation de révélation fantaisiste avec une petite quantité de code simple.

Nous pouvons facilement mettre à jour la direction en ajustant le padding direction et la object-position. Voici la première démo de plus tôt, qui comprend les quatre directions.

Voir le stylo
Un effet de survol de révélation avec un élément par les Amis d’Afif (@t_afif)
sur CodePen.

Voici le CSS que nous utilisons :

img {
  --s: 200px; 

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}

img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}

img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}

img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}

img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}

Plus d’animations de révélation

Nous pouvons étendre l’astuce pour créer plus de variations en utilisant la même idée. Au lieu d’ajouter/enlever le rembourrage d’un côté, nous pouvons le faire pour les deux côtés ou même tous les côtés.

Voir le stylo
Un effet de survol révélateur avec un élément II par les Amis d’Afif (@t_afif)
sur CodePen.

Si nous inspectons le code de la démo ci-dessus, nous ne trouverons pas de grande différence par rapport à la précédente. Tout ce que nous faisons, c’est définir différentes configurations de rembourrage pour créer plus de variation pour le même effet.

Il y a une astuce dans le premier et le dernier exemple où nous utilisons object-fit: none au lieu de object-fit: cover. Dans ces cas, le rembourrage réduira la largeur et la hauteur de la zone de contenu à 0, alors que dans tous les autres cas, on réduit soit la hauteur, soit la largeur. Dans de telles configurations, cover ne fonctionnera pas, mais none peut faire le travail.

MDN États:

Le contenu remplacé n’est pas redimensionné.

Pourquoi n’utilisons-nous pas simplement none dans tous les cas? Nous peut utilisez-le, et cela fonctionne, mais il a un petit inconvénient. none prendra en compte la dimension intrinsèque de l’image, nous sommes donc obligés d’avoir la largeur et la hauteur CSS égales à la dimension intrinsèque pour que l’astuce fonctionne. coverd’autre part, ne conserve que le rapport de l’image et la redimensionne pour s’adapter à la zone, afin que nous puissions définir en toute sécurité n’importe quelle taille CSS pour les images.

Voici une comparaison afin que nous puissions voir la différence.

Voir le stylo
Sans titre par les Amis d’Afif (@t_afif)
sur CodePen.

Dans les deux cas, nous avons l’animation de révélation, mais lors de l’utilisation object-fit: nonel’image n’est pas redimensionnée et conserve sa taille par défaut (500x500), ce qui n’est pas bon. object-fit: cover ne conserve que le ratio et redimensionnera l’image pour l’adapter à la dimension de la boîte.

Conclusion

J’espère que vous avez apprécié cette petite expérience CSS. En utilisant des astuces simples et quelques lignes de code, nous avons réalisé une animation de révélation sympa avec seulement le <img> élément. Nous avons également fait de nombreuses variantes en utilisant la même structure de code.

On peut faire encore plus avec cette astuce. Je vous laisse avec un dernier exemple où je transforme des images en noir et blanc en images colorées au survol.

Voir le stylo
Colorez votre image avec un effet de survol glissant par les Amis d’Afif (@t_afif)
sur CodePen.

Je vous laisse continuer l’exploration et essayer de trouver des animations plus fantaisistes !