L'idée d'Olivier avec
focus-within est probablement de l'appliquer sur le parent et de jouer avec l'enfant:
.ancestor:focus-within .child {… }
Cela dit, le code que tu as es très long et compliqué pour faire quelque chose qui parait simple (même si je ne suis pas sur de voir l'effet final voulu).
En vrac:
.article { height: 100vh;}
Toujours mieux de changer pour un min-height ? si non, que se passe-t-il si tu as trop de contenu ?
.a-img-txt{display:grid;}
Chouette, on est moderne. Attention ceci dit aux noms de tes classes. Ce n'est pas évident de savoir de quoi on parle lorsqu'on voit ça.
Une piste d'idée pour s'améliorer en naming.
.a-img{
max-height: 100vh;
float: right;
top: 0px !important;
max-width: 100%; display: block;
margin-left: auto;
margin-right: auto;
border: 1vw solid #000000;
}
- Le float est un peu moins moderne dans cette utilisation et inutile je pense vu que ton parent est en
display: grid.
-
top: 0px !important; ? pour utiliser top, il faut ajouter la propriété
position qui accepte par example les valeurs
absolute,
relative,
sticky (par défaut en
static). Et !important n'est pas du tout utile ici, il sert en cas de
poids des sélecteurs
/* le texte */
.a-txt{
display:flex;
justify-content:center;
align-items:center;
color:#fff;
opacity:0;
filter:invert(0); /* antibug si effet sur a-img */
transition:opacity .8s; padding: 0;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
z-index: 99999;
font-size: 8vw;
line-height: 8vw;
}
- Antibug ?!
- Font-family, pourquoi ne pas donner dans font à tout ton site ? Si c'est vraiment ponctuel, profites
des variables CSS, c'est gratuit.
- z-index inutile car pas de propriété position (comme pour le top, un peu plus haut).
- vw comme unités, j'adore, mais je trouve ça étrange de l'utiliser dans ce cas. Pourquoi quelqu'un avec un écran très large aurait une énooooooooorme bordure et au contraire, un truc inexistant ? Fais quelque chose cool quoi qu'il arrive.
- vw comme unités, j'adore, mais… pour du text, tu devrais jeter un oeil à
la propriété clamp.
Beaucoup de chose à lire, et à assimiler mais on peut t'aider si tu ne comprends pas certaines chose. Aussi, essaie d'expliquer au mieux le rendu final que tu veux avoir, essaie déjà d'adapter et dis nous là où tu coinces.
Bon amusement
Modifié par Yordi (30 Jan 2023 - 15:43)
Donc le parent...