Résolution de l'exercice P3C5

28 octobre 2023 à 15:49:50

Bonjour à tous,

Je suis actuellement le cours HTML/CSS Mathieu Nebra et de Alexia Toulmet. J'ai jusqu'ici bien reussi à suivre mais là, je ne comprend rien à la solution de l'exercice. En particulier je ne comprends pas la partie qui permet d'afficher un fond noir (opacity à 70%) au dessus de l'image lorsqu'on la survole dans le portfolio. Le bout de code de la solution que je ne comprends pas est le suivant:

.photo-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.lien-conteneur-photo:hover .photo-hover {
  display: flex;
}

et voici le HTML auquel le CSS ce réfère

 <h2>Paysages</h2>
            <div class="grid-paysages">
                <a href="images/portfolio/paysage1.jpg" class="lien-conteneur-photo">
                    <img src="images/portfolio/paysage1.jpg" alt="Mont Aoraki - Nouvelle-Zélande" >
                    <div class="photo-hover">Voir la photo</div>
                </a>
                <a href="images/portfolio/paysage2.jpg" class="lien-conteneur-photo">
                    <img src="images/portfolio/paysage2.jpg" alt="Parc National d’Abel Tasman - Nouvelle-Zélande" >
                    <div class="photo-hover">Voir la photo</div>
                </a>

Quelqu'un pourrait-il essayer de m'expliquer pas à pas. En effet dès le début du code CSS, je suis perdu. En effet on commence par placer un élément aux coordonnées 0,0,0,0 soit tout en haut de l'écran donc pas du tout sur une des images..Ensuite on fait un display flex (sur le selecteur.photo-hover) sur un élément seul alors que tout le chapitre sur flex ne parle jamais du cas à un seul élément.

Je vois bien que la solution fonctionne mais malheureusement je ne la comprends pas bien

Par avance merci pour vos explications

-
Edité par electroinfo 28 octobre 2023 à 15:50:37

AbcAbc6

28 octobre 2023 à 16:24:51

Bonjour,

>> on commence par placer un élément aux coordonnées 0,0,0,0 soit tout en haut de l'écran

Pas exactement, dans ce cas si peut être que oui mais en général on s'appuie sur un éléments parent ou ancêtre en position relative qui sert de référent de positionnement. En l'absence de référent c'est l’élément <body> qui sert de référent de positionnement;

Ensuite ce n'est pas à la position 0,0,0,0, un position n'a qu'un axe x et un axe y. On positionne au point (0,0) par rapport au référent de positionnement et right: 0; veux dire que l'on place le bord droit à zéro ce qui veux dire que l'on étant la largeur de l'élément pour prendre toute la largeur de sont parent positionner. Idem pour bottom: 0;

Si ce n'est pas clair, car je comprends que cette matière de positionnement absolut ne soit pas simple, regarde ces vidéo de grafikart :

Un exemple pratique : une infobulle personnalisée que tu trouvera dans cet ancien cours:

http://user.oc-static.com/pdf/34410-modifier-l-apparence-d-une-infobulle.pdf

Et bien évidement la documentation pour bien comprendre :magicien: :

https://developer.mozilla.org/fr/docs/Web/CSS/position

Pour ce qui est du display: flex; c'est une modification de l'affichage puisqu'au départ il y a un display: none; donc caché. Et tant qu'a afficher, affichons le directement centrer, d'où le display: flex et les autres propriété qui y sont liées pour le centrage de l’élément.

Si tu as encore des questions?

electroinfo

28 octobre 2023 à 22:48:46

Merci pour ton aide, j'ai enfin pu comprendre grâce à ta réponse, et à quelques essais

Merci encore pour le support

AbcAbc6

28 octobre 2023 à 22:55:27

Bonjour, de rien , bonne continuation.

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e