Carrousel d'images avec vignettes

(reprise du message précédent)

Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?

L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.

Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?

À ton avis quelle est la meilleure approche ?

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.



L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.

Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?

À ton avis quelle est la meilleure approche ?

:not() et :has() fonctionnent trés bien aujourd'hui

Mon premier exemple utilise un grid-layout et positionne la première(en position 2) grande image aussitôt dans la première cellule.

en y ajoutant :hover et le positionnement relatif, cela fonctionne.
Pour passer sur plusieurs lignes, c'est aussi quelque chose que grid sait faire:

https://codepen.io/gc-nomade/pen/ogXrzpY

Je trouve grid plus adapté et facile à reconfigurer que flex pour cet exemple Mais c'est personnel

Cordialement

Bonjour gcyrillus,

Cela m'a l'air excellent, je m'y mets au plus vite.

Encore merci.