labo. 01 - exercice 02

Lien animé #2

L'objectif est de faire un effet de survol qui fait apparaitre un background derrière le lien.

HTML

La structure HTML est déjà fournie. Veuillez prendre le temps de regarder et d'analyser le fichier partials/_ex02.html

État de survol

Avant d'aller trop loin dans l'effet de survol à créer. Nous allons le faire sans utiliser la pseudo-classe :hover. Ça nous permettra de voir ce qui se passe sans avoir à passer la souris par dessus. Une fois qu'on sera satisfait on l'ajoutera à la pseudo-classe de notre lien.

Un retour sur les pseudo-éléments sera nécessaire pour bien réussir ce numéro.

À lire : Comprendre les pseudo-element

Pour l'effet de survol de ce numéro, nous allons créer un arrière-plan sur l'élément .link-item--bg. Il faudra ensuite travailler avec CE sélecteur en CSS.

Ajouter un pseudo-élément ::before en utilisant la concaténation SCSS

Ajouter la couleur primaire à l'arrière-plan

Ajouter la propriété essentielle pour qu'un pseudo-élément fonctionne

Ajouter une hauteur de 100%

Ajouter une largeur de 100%

Vous ne devriez rien voir, c'est normal.
Inspectez donc votre pseudo élément afin de voir sa largeur! Pourquoi est-ce qu'il a cette taille déjà?

Ajouter le bon position à votre before et assurer-vous qu'il se place dans le haut à 0 et à gauche 0
Assurez-vous que le point de référence de votre positionnement absolu soit .link-item-bg.
Voyez-vous le texte ? Moi non plus ! Peut-être qu'en changeant l'ordre sur l'axe des Z du pseudo élément, on pourrait l'envoyer derrière le texte.. -1 pourrait fonctionner.

Même si vous avez bien fait sur le changement de profondeur du point précédent, vous verrez toujours qu'un rectangle rouge pour le moment car le texte est rouge et le pseudo élément aussi.. On ne change rien pour le moment.

État caché

Nous avons créé l'état de survol sans utiliser la pseudo-classe :hover, soit visible en tout temps pour le moment. Cachons maintenant le pseudo élément pour ne le faire apparaitre lors du survol. Afin de réaliser cet effet, nous allons cacher l'arrière-plan avec une déformation de taille.

Étirement sur la taille

Par défaut, ajouter une transformation qui permet d'étirerle pseudo-élément sur l'axe des Y seulement à 0 (essentiellement, l'écraser ici.)

Lire sur la propriété d'étirement

L'arrière-plan ne devrait plus être visible. 💪

Effet survol

Ajouter sur le hover du lien, la transformation inverse pour faire apparaitre la ligne lors du survol.
Testez-le! Oops, on ne voit pas le texte maintenant, ajustez la couleur du texte au survol.
Le pseudo élément est un peu serré sur le texte, ajoutez lui un padding de 5px sur tous les côtés.

Finalement, parce qu'un effet sec (sans transition) est extrêmement drabe...

Ajouter une transition de .3s avec un ease-out seulement que sur le transform.