Réaliser une galerie d'images avec CSS

Un abonnement sur mon twitter-X et/ou youtube serait fortement apprécié.

Introduction

En tant que développeur, vous avez certainement déjà été confronté à la création d'une galerie d'images.

Pour un débutant, cela peut rapidement virer au casse-tête. Mais comme vous êtes têtu et avez le goût du travail bien fait, vous lisez ces lignes dans l'espoir de parfaire vos compétences.

Dans cet article, nous allons étudier les différentes possibilités pour construire une galerie d'images. Du plus simple au plus complexe, vous serez en mesure de réaliser tout type de slider, slideshow ou carrousel. La seule limite : votre imagination !

La pseudo-classe :target :

Commençons avec la pseudo-classe :target. Celle-ci permet de cibler un élément afin de déclencher une action (comme on peut le faire en JavaScript). Cette méthode est un classique en CSS, mais elle a un gros inconvénient.

Comme elle se base sur les ancres, il en résulte un phénomène connu : le saut de page. Un autre problème intervient également : celui de l'historique des liens. En effet, les identifiants sont reportés dans la barre d'adresse, ce qui contraint l'internaute, s'il utilise la flèche retour du navigateur, à cliquer pour remonter tout l'historique.

Pour être plus clair, vous aurez une adresse à rallonge. Si vous avez cliqué sur des dizaines de photos, vous imaginez alors l'ampleur du problème.

Slider responsive avec pseudo-classe :target :

Le slider ci-dessous est donc construit en utilisant la pseudo-classe :target. Vous allez constater que la mise en place est assez simple.

La pseudo-classe :focus-within :

Cette pseudo-classe s'applique à un élément ou à l'élément parent lorsque l'un de ses descendants qui peut recevoir un focus au clavier ou à la souris.

Elle est très utile pour styliser les éléments parents en fonction du focus enfant et donner ainsi un indicateur visuel à l'utilisateur, notamment dans un formulaire ou un tableau.

Attention toutefois à ne pas confondre cette pseudo-classe avec :focus ou :focus-visble. Chacune ayant leur propre spécificité.

Slider avec la pseudo-classe :focus-within

Dans ce slider, nous allons donc utiliser la pseudo-classe :focus-within afin de faire apparaître les photos.

L'élément input

Cette méthode comporte un avantage certain par rapport à la pseudo-classe :target. Nous n'utilisons plus l'URI pour pointer une ancre.

La conséquence : plus aucun historique de navigation et plus de saut de page !

Mais, à la base, l'élément input est utilisé pour les formulaires. Cette technique n'est donc pas une solution "naturelle". On parle alors de "hack" CSS. Néanmoins, elle fonctionne bien et permet de réaliser des actions assez complexes mais limitées (sans pour autant passer par JavaScript).

Si bien qu'au lieu d'utiliser la pseudo-classe :target ou encore la pseudo-classe :focus-within, nous allons nous orienter vers la pseudo-classe CSS :checked.

Il est à noter que celle-ci s'applique uniquement sur les élements radio, les cases à cocher (checkbox) ou encore les éléments option dans les select.

Slider avec l'élément input

Slider Grid layout avec input

Slideshow CSS (responsive) fullscreen

Le module CSS Scroll Snap

Le module CSS Scroll Snap introduit les positions d'accroche lors du défilement garantissant ainsi la position sur laquelle on arrive après avoir fait défiler du contenu.

Lire article sur ce blog.

Slider avec CSS Scroll Snap

Slideshow CSS Grid layout

Slideshow avec indicateur de temps

Slider/slideshow avec navigation

Cet exemple est plus complexe dans la mesure où il va falloir gérer à la fois le slider et le défilement automatique.

Slider/slideshow avancé avec contrôles

Carrousel 3D avec défilement automatique

Carrousel 3D avec navigation

Source, inspiration, ressources :

Voir sur le blog les transformations 3D.

Voir sur le blog un exemple de lightbox en CSS (avec méthode input).

Voir sur le blog un exemple de lightbox en CSS (avec méthode ancre).

Voir sur le blog un exemple de carrousel en JS.