labo. 01 - exercice 04

Cartes

.card>.card__media+.card__content
Cette structure nous l'avons vue souvent, mais nous la pratiquons encore une fois pour créer une carte qui mets en application beaucoup d'effet que nous avons vue et qui ajoute des pseudo éléments.

HTML

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

Le fait d'avoir un conteneur pour l'image et un autre pour le contenu nous permet plus de flexibilité au niveau des animations. Vous DEVEZ toujours utiliser cette structure à partir de maintenant (.card qui contient .card__media et .card__content)

Positionnez le .card__content en absolu de sorte à ce qu'il prenne tout l'espace disponible

Absolu, top/left: 0, width/height: 100%
Vous devez mettre un position relative sur .card pour contraindre le .card__content qui est maintenant en absolu.
Mettez aussi tout de suite la couleur du texte à --color-white sur .card

Le contenu est collé dans .card__content

Ajoutez un padding de 20px.
Pensez à utiliser les variables de spacing pour avoir une uniformité dans les espacements, jettez un oeil dans settings/spacing.scss, il en existe une de 20px. Utilisez-la.

Vous devez espacer le surtitle et le title sur la carte. Dans .card__content

Dans .card__content :

flex en direction column
Mettez de l'espace entre les éléments pour les repousser

Le surtitre

Il faut maintenant créer un surtitre où l'espace à droite du texte sera comblée par un trait (pseudo-element) qui va s'étendre jusqu'à l'extrémité de la card.

Créez un style pour .card__surtitle

typo: taille de 20px, poids de 500 et letter-spacing de .2em et mettre en majuscule

Trouvez-vous que le texte est illisible?
Vous allez régler ça avec un pseudo-element dans .card__media. Le pseudo agira à titre de couche semi-opaque entre l'image et le texte pour en améliorer le contraste.

Créez un sélecteur .card__media et à l'intérieur, imbriquez un &::after qui vous servira de trame pour foncir l'image.
Ajoutez la propriété essentielle pour un pseudo-element

Il doit couvrir tout l'espace :

position absolute, top/left: 0, width/height: 100%
mettez une couleur d'arrière-plan noire à .2 d'opacité

Regardez en bas de l'image dans votre navigateur, le &::after dépasse un peu.

Mettez un display block sur l'image dans votre sélecteur `.card__media` afin de régler ce problème.

Suite du surtitre

Revenons à .card__surtitle et au trait qu'on va ajouter à côté.

Créez un pseudo &::after dans .card__surtitle

Ajoutez la propriété essentielle pour un pseudo-element

arrière-plan blanc, hauteur de 2px et largeur de 100%, display block

La ligne est sous le surtitre, vous devez la mettre à droite en utilisant du flex.

Mettez du flex sur .card__surtitle.

align-items pour la centrer verticalement avec le texte

Mettez un espace de 20px entre la ligne et le texte à l'aide de gap: 20px;

Maintenant qu'on a mis du flex, le display block sur le &::after n'est plus nécessaire. Enlève-le!

La ligne doit aller jusqu'à l'extrêmité de le carte, mais le padding sur .card__content vous en empêche

Mettez une marge négative à droite sur le &::after équivalente au padding que vous avez mis dans votre carte (N'oubliez pas, il y avait une variable..)

La marge négative sur un élément block permet de « manger » dans l'espace comme du padding par exemple. C'est un truc qui peut être très utile lorsqu'on fait des sites réactifs.

Le titre

Créez un sélecteur .card__title

couleur white (variable)

enlevez les marges pour qu'il soit collé sur le padding de la carte

À l'intérieur du h2, on va ajouter l'icône de la flèche arrow-right à l'aide de la technique des icônes.

Vous devez aligner l'icône toujours à droite, en bas dans le titre.

Sur .card__title, display flex, align-items flex-end
Pour espacer un peu l'icône du texte, ajoutez aussi gap: 20px

L'image

Vous allez préparer l'image dans le but de l'animer.

Dans .card__media, vous aller faire grossir l'image sur le survol et faire en sorte qu'elle ne s'affiche pas a l'extérieur de la carte

position relative et overflow hidden

Vous avez imbriqué un sélecteur img dans .card__media, dans le but de fixer l'image pour l'animer, ajoutez-y :

width/height 100%, object-fit cover

Vous devez changer le ratio de la carte pour qu'elle soit un peu moins haute. Toujours dans img sous .card__media :

Afin de forcer un ratio constant à l'image, on va ajouter la déclaration : aspect-ratio: 3 / 4;

L'animation

Vous devez faire grossir l'image lors d'un survol de la souris.

Dans .card, ajoutez un sélecteur &:hover .card__media img{} et faire grossir légèrement l'image avec transform: scale(1.1);
Passez votre souris sur la carte, c'est un peu sec. Ajoutez une transition.

Dans le sélecteur img de .card__media :

Ajoutez transition: transform 0.6s ease-in-out; afin de créer une transition entre le scale de 1 à 1.1

Maintenant, sur le survol de la carte, il faut diminuer l'opacité de notre trame noire pour mieux voir l'image.

Dans .card , ajoutez un sélecteur &:hover .card__media::after {} où il faut diminuer la valeur de l'alpha de l'arrière-plan, soit background: rgba(0, 0, 0, 0.2);

Passez votre souris sur la carte, c'est un peu sec. Ajoutez une transition.

Dans le sélecteur &::after de .card__media :

Ajoutez transition: background 0.6s ease-in-out; afin de créer une transition entre le scale de 1 à 1.1

Finalement, il faut faire bouger l'icône vers la droite, toujours au survol.

Dans .card, ajoutez un sélecteur &:hover .card__title .icon où il faut diminuer la valeur de l'alpha de notre arrière-plan background: rgba(0, 0, 0, 0.2);

Passez votre souris sur la carte, c'est un peu sec. Ajoutons une transition.

Dans le sélecteur &::after de .card__media :

Bon, c'est encore sec non? Où devrait-on mettre la dernière transition pour que ça soit plus smooth? À vous de choisir! 😏