Galerie d'images en CSS

Mise en place de la structure HTML

Pour créer une galerie d'images, commencez par établir la structure HTML. Créez d'abord un élément <div> conteneur qui accueillera toutes les images de la galerie. Ce conteneur servira d'enveloppe et vous permettra d'appliquer des styles à la galerie.

À l'intérieur du <div> conteneur, ajoutez des éléments <img> individuels pour chaque image que vous souhaitez inclure dans la galerie. Précisez l'attribut src pour chaque image, indiquant son emplacement. Vous pouvez aussi ajouter un texte alt pour décrire chaque image et améliorer l'accessibilité.

Pour faciliter le stylage et la manipulation ultérieurs, attribuez des noms de classe ou des ID au <div> conteneur et aux éléments <img> individuels. Par exemple, donnez au conteneur un nom de classe comme "gallery-container" et à chaque image un nom de classe comme "gallery-image". Ces noms de classe vous permettront de cibler des éléments spécifiques avec des sélecteurs CSS.

<div class="gallery-container">
  <img src="image1.jpg" alt="Image 1" class="gallery-image">
  <img src="image2.jpg" alt="Image 2" class="gallery-image">
  <img src="image3.jpg" alt="Image 3" class="gallery-image">
  <!-- Ajoutez d'autres éléments d'image selon vos besoins -->
</div>

En établissant cette base HTML, vous posez les fondations pour le stylage avec CSS. Le <div> conteneur agit comme un élément parent qui encapsule les images individuelles, tandis que les noms de classe fournissent des points d'ancrage pour un stylage ciblé. Avec cette structure en place, vous pouvez passer au stylage du conteneur de la galerie et des images.

Stylisation du conteneur de la galerie

Une fois la structure HTML en place, l'étape suivante consiste à styliser le conteneur de la galerie. Le conteneur de la galerie est l'élément <div> qui contient toutes les images. En stylisant le conteneur, vous pouvez contrôler son apparence et sa mise en page.

Pour définir la largeur et la hauteur du conteneur, utilisez les propriétés width et height en CSS. Vous pouvez spécifier des valeurs en pixels, en pourcentages ou dans toute autre unité valide. Par exemple, vous pouvez définir une largeur fixe de 800 pixels et une hauteur qui s'ajuste en fonction du contenu à l'intérieur.

.gallery-container {
  width: 800px;
  height: auto;
}

Pour améliorer son apparence, vous pouvez appliquer une couleur de fond ou ajouter une bordure. Utilisez background-color pour définir une couleur unie ou background-image pour appliquer une image comme fond. L'ajout d'une bordure aide à définir ses limites et fournit une séparation visuelle avec les autres éléments de la page. Utilisez border pour spécifier la largeur, le style et la couleur de la bordure.

.gallery-container {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

Pour le centrer horizontalement sur la page, utilisez margin avec les valeurs 0 auto. Cela définit les marges supérieure et inférieure à 0 et les marges gauche et droite à auto.

.gallery-container {
  margin: 0 auto;
}

En combinant ces styles, vous pouvez créer un conteneur de galerie attrayant et centré. Ajustez les valeurs selon vos préférences de design pour votre galerie d'images.

.gallery-container {
  width: 800px;
  height: auto;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  margin: 0 auto;
}

Une fois ce conteneur stylisé prêt, vous pouvez passer à la stylisation des images individuelles à l'intérieur pour obtenir une galerie d'images cohérente.

Stylisation des images

Après avoir stylisé le conteneur de la galerie, l'étape suivante consiste à styliser les images dans la galerie. Des tailles, des bordures et des effets visuels cohérents peuvent améliorer l'apparence de votre galerie d'images.

Pour créer un aspect uniforme, définissez une largeur et une hauteur cohérentes pour toutes les images en utilisant les propriétés width et height en CSS. Vous pouvez utiliser des valeurs en pixels fixes ou des pourcentages pour rendre les images réactives. Définir une largeur de 100% fera que chaque image remplira son conteneur tout en conservant son ratio d'aspect.

.gallery-image {
  width: 100%;
  height: auto;
}

Pour ajouter un attrait visuel, vous pouvez appliquer des bordures ou un border-radius aux images. Utilisez la propriété border pour spécifier la largeur, le style et la couleur de la bordure. La propriété border-radius vous permet d'arrondir les coins des images.

.gallery-image {
  border: 2px solid #fff;
  border-radius: 5px;
}

Pour créer de la profondeur et de la séparation entre les images, envisagez d'appliquer une ombre portée. La propriété box-shadow vous permet d'ajouter des ombres autour des images. Vous pouvez contrôler les décalages horizontaux et verticaux, le rayon de flou, le rayon d'expansion et la couleur de l'ombre.

.gallery-image {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

En combinant ces styles avec vos préférences de design, vous pouvez obtenir des résultats visuellement attrayants pour votre galerie.

.gallery-image {
    width:100%;
    height:auto;
    border:2px solid #fff;
    border-radius:5px;
    box-shadow:0 2px 4px rgba(0, 0, 0, .2);
}

Avec des images stylisées, passez maintenant à leur disposition dans une mise en page en grille pour créer une galerie d'images structurée et organisée.

Création d'une mise en page en grille

Pour organiser les images de manière structurée, vous pouvez utiliser CSS Grid ou Flexbox pour créer une mise en page en grille pour votre galerie d'images. Ces techniques de mise en page vous permettent de définir le nombre de colonnes et de lignes, ainsi que de fixer l'espacement entre les images.

CSS Grid est un système de mise en page qui vous permet de créer des grilles bidimensionnelles. Avec CSS Grid, vous pouvez définir le nombre de colonnes et de lignes en utilisant les propriétés grid-template-columns et grid-template-rows.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

La syntaxe repeat(3, 1fr) crée trois colonnes, chacune avec une largeur de 1fr, ce qui signifie qu'elles partageront également l'espace disponible.

Si vous préférez utiliser Flexbox pour votre mise en page en grille, vous pouvez obtenir des résultats similaires. Flexbox est un système de mise en page unidimensionnel qui permet des conceptions flexibles et réactives. Pour créer une grille avec Flexbox, utilisez la propriété display: flex sur le conteneur et définissez la propriété flex-wrap sur wrap. Ensuite, contrôlez la largeur de chaque image en utilisant la propriété flex-basis.

.gallery-container {
  display: flex;
  flex-wrap: wrap;
}

.gallery-image {
  flex-basis: 33.33%;
}

Dans cet exemple, flex-basis: 33.33% fixe la largeur de chaque image à un tiers de la largeur du conteneur.

Pour ajouter un espacement entre les images dans votre grille, utilisez soit la propriété gap de CSS Grid, soit la propriété margin de Flexbox. La propriété gap spécifie les espaces entre les lignes et les colonnes, tandis que l'utilisation de la marge de Flexbox ajoute un espacement autour de chaque image.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.gallery-image {
   flex-basis: 33.33%;
   margin: 5px;
}

En ajustant les valeurs de 'gap' ou 'margin', vous contrôlez l'espacement entre les images, obtenant ainsi l'aspect souhaité pour votre galerie. Créer une mise en page en grille en utilisant CSS Grid ou Flexbox offre une façon structurée d'organiser vos images. Expérimentez avec différentes configurations de colonnes et de lignes, ainsi qu'avec les tailles d'espacement pour trouver la mise en page qui convient le mieux à la conception de votre galerie d'images.

Considérations pour la conception réactive

Lors de la création d'une galerie d'images, pensez à la conception réactive pour vous assurer que votre galerie s'affiche et fonctionne bien sur différentes tailles d'écran et appareils. La conception réactive aide à offrir une bonne expérience visuelle à vos utilisateurs, quel que soit l'appareil qu'ils utilisent.

Pour rendre votre galerie d'images réactive, vous pouvez utiliser des media queries en CSS. Les media queries vous permettent d'appliquer différents styles en fonction de la taille de l'écran ou des caractéristiques de l'appareil. En définissant des points de rupture à des largeurs spécifiques, vous pouvez ajuster la mise en page de votre galerie pour l'adapter à différentes tailles d'écran.

/* Styles par défaut pour la galerie */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Media query pour les écrans plus petits */
@media screen and (max-width: 768px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Media query pour les écrans encore plus petits */
@media screen and (max-width: 480px) {
  .gallery-container {
    grid-template-columns: 1fr;
  }
}

Les styles par défaut définissent une mise en page en grille avec trois colonnes. La première media query cible les écrans d'une largeur maximale de 768 pixels (généralement les tablettes) et ajuste la galerie pour avoir deux colonnes. La deuxième media query cible des écrans encore plus petits, comme les téléphones mobiles, et change la mise en page en une seule colonne.

Vous pouvez définir vos points de rupture en fonction du contenu et de la conception de votre galerie. Il est recommandé de tester votre galerie sur divers appareils et tailles d'écran pour déterminer les points de rupture optimaux pour la visualisation.

En plus d'ajuster la mise en page, vous devrez peut-être aussi redimensionner les images elles-mêmes pour qu'elles s'adaptent mieux aux écrans plus petits. Pour ce faire, définissez la propriété max-width des images à 100% afin qu'elles soient réactives et se redimensionnent proportionnellement dans leurs conteneurs.

.gallery-image {
  max-width: 100%;
  height: auto;
}

En définissant max-width:100%, les images se réduiront proportionnellement si leur conteneur devient plus petit que leur taille d'origine. La propriété height:auto garantit que le ratio d'aspect est maintenu pendant le redimensionnement.

N'oubliez pas de tester votre galerie d'images sur divers appareils et tailles d'écran pour qu'elle s'affiche correctement comme prévu. La conception réactive est essentielle pour offrir une bonne expérience utilisateur en s'assurant que tout le monde peut y accéder facilement.

Ajout d'effets au survol

Pour ajouter de l'interactivité à votre galerie d'images, vous pouvez utiliser des effets au survol. Ces effets se déclenchent lorsque l'utilisateur déplace son curseur sur une image.

Un effet de survol courant consiste à modifier l'opacité de l'image au survol. En réduisant l'opacité, vous créez un indice visuel qui indique que l'image est interactive. Utilisez la pseudo-classe :hover en CSS et définissez la propriété opacity à une valeur entre 0 et 1.

.gallery-image:hover {
  opacity: 0.8;
}

Un autre effet de survol attrayant consiste à afficher des légendes d'image au survol. Cela vous permet de fournir plus d'informations sur chaque image lorsque l'utilisateur interagit avec elle. Utilisez la pseudo-classe :hover avec les pseudo-éléments ::before ou ::after.

.gallery-image {
  position: relative;
}

.gallery-image::before {
  content: attr(alt);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image:hover::before {
  opacity: 1;
}

Pour rendre ces effets fluides, appliquez des transitions. Les transitions contrôlent la vitesse et le timing des changements. Utilisez la propriété transition pour spécifier l'effet souhaité.

.gallery-image {
  transition: transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.05);
}

Expérimentez avec différentes valeurs et styles pour trouver la combinaison qui convient le mieux à votre design.

Mise en œuvre de la fonctionnalité Lightbox

La lightbox est une technique utilisée dans les galeries d'images pour afficher une version plus grande d'une image lorsqu'on clique dessus. Elle permet aux utilisateurs de se concentrer sur une image tout en assombrissant le reste de la page. La mise en œuvre de la fonctionnalité lightbox nécessite du CSS et du JavaScript.

Lorsqu'on clique sur une image, une version plus grande apparaît au-dessus de la page actuelle avec un arrière-plan plus sombre derrière. Cela crée une expérience de visionnage concentrée pour l'utilisateur.

Pour créer une lightbox en utilisant CSS, commencez par définir un élément conteneur qui contiendra la version plus grande de l'image. Ce conteneur doit être initialement caché et positionné au-dessus des autres contenus en utilisant une valeur élevée de z-index. Appliquez une couleur de fond semi-transparente pour créer l'effet de superposition.

<div id="lightbox-container">
  <img id="lightbox-image" src="" alt="">
  <span id="lightbox-close">&times;</span>
</div>

#lightbox-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  z-index: 9999;
}

#lightbox-image {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

Pour déclencher la lightbox lorsqu'on clique sur une image, utilisez JavaScript. Ajoutez un écouteur d'événement de clic à chaque image de la galerie. Lorsqu'une image est cliquée, définissez l'attribut src de l'image de la lightbox pour qu'il corresponde et affichez-la.

const galleryImages = document.querySelectorAll('.gallery-image');
const lightBoxContainer = document.getElementById('lightbox-container');
const lightBoxImage = document.getElementById('lightbox-image');
const lightBoxClose = document.getElementById('lightbox-close');

galleryImages.forEach(image => {
  image.addEventListener('click', () => {   
    lightBoxImage.src = image.src;
    lightBoxContainer.style.display = 'block';
  });
});

lightBoxClose.addEventListener('click', () => {   
  lightBoxContainer.style.display = 'none';
});

Cliquer sur une image de la galerie définira l'attribut src de l'image de la lightbox pour qu'il corresponde et l'affichera. Cliquer sur le bouton de fermeture masquera le conteneur de la lightbox.

N'oubliez pas de styliser les éléments selon vos préférences de design, comme ajuster la taille, le positionnement, le bouton de fermeture et personnaliser la couleur de superposition.