Dans cet exercice je m'intéresse à la 3ème partie qui commence par "créer sur les images un effet au survol de la souris en affichant un élément (grâce à display ) qui ...". Sachant que je n'ai pas réussi à résoudre cette consigne, je suis allé voir la correction de l'exo pour essayer de bien la comprendre. Je précise que l'on s'intéresse ici aux fichiers portfolio.html et style.css. Il y a plusieurs lignes de code du fichier style.css que je n'arrive pas à comrendre à quoi elles sont utiles. Avant de vous préciser ces lignes de code j'aimerais dire que pour moi quand on écrit "display:flex" ça permet d'aligner les éléments d'un conteneur, et display:none ça permet de masquer un élément de la page (svp corrigez-moi si j'ai tort). Voici mes points d'incompréhension:
1)J'ai pas compris à quoi sert la ligne de code
.lien-conteneur-photo{
position:relative;
}
ici .
2)A quoi sert l'association de
display:flex;
et de
display:none;
au niveau du sélecteur .photo-survol .
3)J'ai pas compris à quoi sert ici (dans ce fichier) la ligne de code:
display:flex;
au niveau du sélecteur .lien-conteneur-photo:hover .photo-survol .
Le positionement relatif sert à indiquer la zone de référence pour le positionement des enfants en position:absolutetout en gardant le parent dans le flux de la page. top:0 est alors le haut du parent le plus proche positionné pour un enfant en position:absolute. Si aucun parent n'est trouvé, alors top:0; est le haut de body.
Le display:flex permet de se servir de propriété d'alignement que l'on ne trouve pas dans display:block; un display:grid ferait aussi l'affaire.
La redondance du display , flex puis none est inutile, la dernière valeur déclarée est celle appliquée. Le display:flex; ecrit plus tôt ne sert à rien et peut-être retiré de la règle, c'est probablement un reliquat en cours de dev. Il n'est utile que sur le selecteur en :hover
fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui