Comment changer la couleur d’une image quand on la survole.
Un effet visuel qui sert à indiquer que les images de votre site sont interactives.
1. Contenu de la page
La première étape est de créer la page web. On peut ici faire le document et le contenu de la page en utilisant très peu de contenu. Le document de la page contient la partie head servant à charger la feuille de style externe, tandis que l’élément body contient l’image à afficher. Pour définir les effets, nous appliquons les classes à l’image avec du CSS. L’attribut style sert à charger l’unique image.
2. Lancement du CSS
Créez un nouveau fichier du nom de « styles.css » , qui servira à stocker les règles de mise en style. Les premières règles à placer dans ce fichier sont les définitions des conteneurs du HTML et du corps. Ces deux éléments doivent recouvrir la totalité de l’écran sans aucune marge, ce que l’on fait en mettant leur largeur et leur hauteur à 100%, et leurs marges et leur remplissage à 0.
3. Définition de l’image
La classe image détermine les propriétés par défaut de l’image adaptative à afficher. Il est important de préciser une largeur et une hauteur afin que l’élément ne soit pas invisible par défaut. Les propriétés d’arrière-plan doivent, de même, permettre à l’image indiquée de recouvrir l’élément. Nous voulons aussi que l’élément s’affiche en inline pour pouvoir suivre le texte, mais aussi avoir des propriétés block qui permettent de déterminer sa largeur et sa hauteur.
4. Préparation de la recolorisation de transition
Nous devons appliquer deux transitions d’une durée d’une seconde à l’effet de recolorisation. La transition filter servira à appliquer le filtre de recolorisation de manière à ce qu’il passe d’une couleur à l’autre avant de trouver sa cible. La transition transform permet à l’image d’animer sa rotation.
5. Définition de la recolorisation de survol
Maintenant que l’attribut transition est prêt à animer les modifications appliquées à l’attribut filter, il nous reste simplement à déterminer l’état filter, qui sert lorsqu’on survole l’image. Dans cet exemple nous appliquons un filtre appelé hue-rotate, qui fait usage d’un cercle chromatique qui permet de passer d’une couleur à une autre. Nous faisons ici une rotation de 180 degrés.
6. Définition de la rotation
En même temps que les couleurs changent, nous utilisons aussi l’attribut transform pour que l’élément fasse une rotation de 45 degrés. Comme nous avons auparavant déjà appliqué la transition à l’attribut transform, cette modification semblera animée quand l’internaute fera passer le curseur de la souris sur l’image.
Pas d’assomptions
Il arrive que les visiteurs passent à côté d’éléments interactifs. Les indicateurs tels que cet effet leur montrent clairement avec quels éléments ils peuvent interagir.
