CSS - Galerie d'images

Bienvenue, aspirants designers web ! Aujourd'hui, nous plongeons dans le monde passionnant des galeries d'images CSS. En tant que votre enseignant de quartier bienveillant, je suis ravi de vous guider dans cette aventure. Transformons ces images statiques ennuyeuses en galeries attrayantes et interactives qui rendront vos sites web éclatants !

CSS - Image Gallery

Galerie d'images simple

Commençons par les bases. Une galerie d'images simple est comme disposer de photos sur votre mur - il s'agit de la présentation. Voici comment nous pouvons en créer une en utilisant CSS :

<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

Dans cet exemple, nous utilisons Flexbox pour créer un layout responsive. La propriété flex-wrap: wrap garantit que nos images s'enrouleront sur la ligne suivante si il n'y a pas assez d'espace. justify-content: center centre nos images horizontalement.

Galerie d'images avec un effet de survol

Maintenant, ajoutons un peu d'interactivité ! Les effets de survol peuvent rendre votre galerie plus engageante. C'est comme ajouter un message secret qui n'apparaît que lorsque vous regardez de plus près.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<div class="overlay">
<div class="text">Bonjour le monde</div>
</div>
</div>
<!-- Répétez pour les autres images -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Ce CSS crée une superposition qui apparaît lorsque vous survolez une image. La propriété transition lui donne un effet de fondu en douceur.

Galerie d'images responsive utilisant Media Query

Dans le monde multi-appareils d'aujourd'hui, la réactivité est la clé. Faisons en sorte que notre galerie s'adapte à différentes tailles d'écran :

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

Ce CSS utilise CSS Grid pour créer un layout responsive. La fonction minmax garantit que nos images sont au moins de 200px de large, mais peuvent grandir si de l'espace est disponible. Les requêtes média ajustent le layout pour les écrans plus petits.

Syntaxe

Prenez un moment pour comprendre la syntaxe que nous avons utilisée. Les propriétés CSS suivent cette structure :

selecteur {
propriété: valeur;
}

Voici un tableau des propriétés CSS couramment utilisées dans les galeries d'images :

Propriété	Description	Exemple
display	Spécifie le comportement d'affichage	`display: flex;`
width	Définit la largeur d'un élément	`width: 200px;`
height	Définit la hauteur d'un élément	`height: 200px;`
margin	Définit les marges d'un élément	`margin: 10px;`
object-fit	Spécifie comment une image doit être redimensionnée	`object-fit: cover;`
position	Spécifie la méthode de positionnement utilisée	`position: relative;`
opacity	Définit le niveau d'opacité pour un élément	`opacity: 0;`
transition	Spécifie l'effet de transition	`transition: 0.5s ease;`

Galerie d'images avec défilement horizontal

Parfois, vous souhaitez que votre galerie défile horizontalement. C'est comme un tambour de photos que vous pouvez faire défiler :

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<!-- Ajoutez plus d'images selon behov |
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

Ce CSS crée une galerie défilante horizontalement. La propriété overflow-x: auto ajoute une barre de défilement horizontale lorsque nécessaire.

Galerie d'images avec défilement vertical

Les galeries défilantes verticales sont excellentes pour montrer un grand nombre d'images dans un espace compact :

<div class="gallery-vertical">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<!-- Ajoutez plus d'images selon behov |
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

Ce CSS crée une galerie défilante verticalement. La propriété overflow-y: scroll ajoute une barre de défilement verticale.

Galerie d'images avec CSS Grid

CSS Grid est un outil puissant pour créer des layouts complexes. Utilisons-le pour créer une galerie dynamique :

<div class="grid-gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>

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

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

Ce CSS crée un layout en grille où certaines images s'étendent sur plusieurs colonnes ou rangées, créant un layout plus dynamique.

Galerie d'images avec onglets

Les galeries avec onglets sont un excellent moyen d'organiser différents ensembles d'images :

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Nature</button>
<button class="tablinks" onclick="openTab(event, 'City')">Ville</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Nature 1">
<img src="nature2.jpg" alt="Nature 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="Ville 1">
<img src="city2.jpg" alt="Ville 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Ce CSS crée une interface avec onglets. Vous aurez besoin de JavaScript pour le rendre fonctionnel :

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

Diaporama CSS

Créons un diaporama simple :

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}

Vous aurez besoin de JavaScript pour contrôler le diaporama :

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Changez l'image toutes les 2 secondes
}

Galerie de diaporama CSS

Enfin, combinons notre diaporama avec des vignettes pour une expérience plus interactive :

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

Vous devrez modifier le JavaScript pour gérer les clics sur les vignettes :

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Et voilà ! Nous avons couvert une large gamme de techniques de galeries d'images CSS. Souvenez-vous, la pratique fait toujours parfait. Essayez de combiner ces techniques pour créer vos propres galeries uniques. Bonne programmation !

Credits: Image by storyset