28128 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai une div avec à l'intérieur une image. Le souci est que lors du hover (opacité couvrant toute l'image), celui-si prend bien toute la largeur de la fenêtre, mais se limite à la hauteur de la photo plutôt que celle de la div parente. J'ai donc une marge en haut et en bas de l'hover.
Un peu comme ce filet sur le codepen :
https://codepen.io/herde2/pen/poZZxZz
Puis-je y faire quelque chose ?
Merci et bonne journée Smiley smile
Bonjour Olivier C Smiley cligne
C'est bien ça :
.a-img:focus-within {
  background: #ff6600cc;
}
???
Ça ne fonctionne pas Smiley decu
l'opacité couvre la photo plutôt que de n'apparaître que lors du hover Smiley ohwell
Mais je ne suis pas certain de bien avoir compris;)
Merci et bonne journée.
Modérateur
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 Smiley smile
Modifié par Yordi (30 Jan 2023 - 15:43)
Bonjour Yordi,
Merci pour toutes tes remarques. Modifications en cours Smiley biggrin
Par contre, pour le
focus-within
Toujours rien compris Smiley hum
L'image est dans un slider et je n'ai besoin de régler la hauteur de l'effet hover que sur une image Smiley murf Donc le parent...
Merci pour ton/votre aide Smiley cligne
connecté
PLGPPUR a écrit :
L'image est dans un slider et je n'ai besoin de régler la hauteur de l'effet hover que sur une image Smiley murf Donc le parent...

Et bien je ne sais pas, j'avais cru comprendre que vous vous désoliez de limiter l'effet d'opacité à l'image :
PLGPPUR a écrit :
Le souci est que lors du hover (opacité couvrant toute l'image), celui-si prend bien toute la largeur de la fenêtre, mais se limite à la hauteur de la photo plutôt que celle de la div parente.

J'avais donc proposé une solution pour impacter la div parente de l'image. Maintenant à vous de voir...
Olivier, on se connait "bien", j'avais un autre "user ID" avant Smiley cligne
Le problème c'est que je ne comprends pas ce
focus-within

Je l'aai mis sur le parent et... patatra Smiley murf
Mais je te fais confiance, je vais encore effectuer des recherches.
Bonne soirée et merci !
@toi et yordi : merci pour vos explications Smiley smile
Le parent (content) a un margin de 1em (je viens de le voir). Donc le hover ne recouvre que la zone destinée et non le margin. Est-il possible d'étendre l'effet opacité jusqu'au margin 1em ?
Désolé, en tous cas j'ai beaucoup appris aujourd'hui. Merci !
Bonjour Yordi,
Désolé de ne pas avoir répondu et classer le topic comme résolu.
Oui, c'est tout bon !
Merci Smiley cligne