labo. 01 - exercice 06

Lien animé #3

Vous en voulez plus? Voici un autre effet intéressant.

Réutilisabilité et ajustement

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

Nous avons ajouté la classe .link-item--underline-side en plus à un lien ayant déjà .link-item--underline. Pour la suite, pensez travailler avec un sélecteur à 2 classes.

État de survol

Ce qu'il faut faire ici, c'est de ne pas recréer entièrement le CSS alors que les changements versus .link-item--underline sont mineurs. Nous allons simplement modifier la transformation de la ligne pour changer l'effet d'animation. Les autres styles proviendront de .link-item--underline sans qu'on ait rien à faire.

Travaillons avec CE sélecteur .link-item--underline-side

Modifier la transformation du ::after afin de l'étirer sur l'axe des X pour qu'il soit à 0 (invisible finalement).

Nous allons ajuster les styles sur l'état de survol de .link-item--underline-side

Ajouter sur le hover la transformation inverse pour faire apparaitre la ligne lors du survol.