Transitions CSS : Birds Gallery [CSS17]

Cet exercice consiste à utiliser des transitions CSS pour gérer l’affichage d’une galerie d’images. Dans un second temps, la galerie doit être rendue totalement fonctionnelle avec JavaScript.

Consignes de l’exercice

Récupérez les fichiers de travail nécessaires à l’exercice. Pour augmenter la difficulté, si vous le souhaitez, téléchargez uniquement les images et construisez vous-même les fichiers HTML et CSS.

Fichiers de travail

Modifiez le CSS afin de reproduire l’effet présenté dans l’exemple ci-dessous.

<div class="demo-bird-gallery">
    <h1>Birds gallery</h1>
    <div class="gallery">
        <figure>
            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
    </div>
</div>

<div class="demo-bird-gallery">    <h1>Birds gallery</h1>    <div class="gallery">        <figure>            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>    </div></div>

@import url("https://fonts.googleapis.com/css?family=Ubuntu");
.demo-bird-gallery {
  color: #fff;
  background-color: #000;
  font-family: "Ubuntu", sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 950px;
  margin: auto;
}

.gallery figure {
  position: relative;
  width: 200px;
  height: 160px;
}

.gallery .gallery-img {
  width: 100%;
  height: 100%;
  border: 2px solid #ccc;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.gallery figcaption {
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition-property: all;
  transition-duration: 1s;
}

.gallery figcaption:hover {
  opacity: 1;
}

.gallery figcaption span {
  margin: auto;
}

@import url("https://fonts.googleapis.com/css?family=Ubuntu");.demo-bird-gallery {  color: #fff;  background-color: #000;  font-family: "Ubuntu", sans-serif;}.gallery {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  max-width: 950px;  margin: auto;}.gallery figure {  position: relative;  width: 200px;  height: 160px;}.gallery .gallery-img {  width: 100%;  height: 100%;  border: 2px solid #ccc;  background-repeat: no-repeat;  background-position: center;  background-size: cover;}.gallery figcaption {  position: absolute;  top: 1px;  left: 1px;  display: flex;  justify-content: center;  width: 100%;  height: 100%;  opacity: 0;  background-color: rgba(0, 0, 0, 0.5);  transition-property: all;  transition-duration: 1s;}.gallery figcaption:hover {  opacity: 1;}.gallery figcaption span {  margin: auto;}

Modifiez le CSS afin de reproduire l’effet présenté dans l’exemple ci-dessous.

<div class="demo-bird-gallery">
    <h1>Birds gallery</h1>
    <div class="gallery">
        <figure>
            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
    </div>
</div>

<div class="demo-bird-gallery">    <h1>Birds gallery</h1>    <div class="gallery">        <figure>            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>    </div></div>

@import url("https://fonts.googleapis.com/css?family=Ubuntu");
.demo-bird-gallery {
  color: #fff;
  background-color: #000;
  font-family: "Ubuntu", sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 950px;
  margin: auto;
}

.gallery figure {
  position: relative;
  width: 200px;
  height: 160px;
  perspective: 400px;
}

.gallery figure .gallery-img {
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition-property: all;
  transition-duration: 1s;
}

.gallery figure:hover .gallery-img {
  transform: rotateY(180deg);
}

.gallery figure figcaption {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
  background-color: rgba(0, 0, 0, 0.5);
  transition-property: all;
  transition-duration: 1s;
  backface-visibility: hidden;
}

.gallery figure:hover figcaption {
  transform: rotateY(0deg);
}

.gallery figure figcaption span {
  margin: auto;
}

@import url("https://fonts.googleapis.com/css?family=Ubuntu");.demo-bird-gallery {  color: #fff;  background-color: #000;  font-family: "Ubuntu", sans-serif;}.gallery {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  max-width: 950px;  margin: auto;}.gallery figure {  position: relative;  width: 200px;  height: 160px;  perspective: 400px;}.gallery figure .gallery-img {  width: 100%;  height: 100%;  border: 2px solid #fff;  background-repeat: no-repeat;  background-position: center;  background-size: cover;  transition-property: all;  transition-duration: 1s;}.gallery figure:hover .gallery-img {  transform: rotateY(180deg);}.gallery figure figcaption {  position: absolute;  top: 2px;  left: 2px;  display: flex;  justify-content: center;  width: 100%;  height: 100%;  transform: rotateY(-180deg);  background-color: rgba(0, 0, 0, 0.5);  transition-property: all;  transition-duration: 1s;  backface-visibility: hidden;}.gallery figure:hover figcaption {  transform: rotateY(0deg);}.gallery figure figcaption span {  margin: auto;}

À l’aide de JavaScript, faites en sorte que la galerie permette de zoomer l’image au clic sur la vignette comme dans l’exemple ci-dessous.

<div class="demo-bird-gallery">
    <h1>Birds gallery</h1>
    <div class="gallery">
        <figure>
            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
        <figure>
            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>
            <figcaption><span>Légende associée</span></figcaption>
        </figure>
    </div>
    
    <div class="gallery-modal">
    <div class="gallery-modal-content">
            <div class="gallery-modal-img"></div>
        </div>
    </div>
</div>

<div class="demo-bird-gallery">    <h1>Birds gallery</h1>    <div class="gallery">        <figure>            <div class="gallery-img" style="background-image: url('bird-01.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-02.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-03.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-04.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-05.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>        <figure>            <div class="gallery-img" style="background-image: url('bird-06.webp')"></div>            <figcaption><span>Légende associée</span></figcaption>        </figure>    </div>        <div class="gallery-modal">    <div class="gallery-modal-content">            <div class="gallery-modal-img"></div>        </div>    </div></div>

@import url("https://fonts.googleapis.com/css?family=Ubuntu");
.demo-bird-gallery {
  color: #fff;
  background-color: #000;
  font-family: "Ubuntu", sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 950px;
  margin: auto;
}

.gallery figure {
  position: relative;
  width: 200px;
  height: 160px;
  perspective: 400px;
}

.gallery figure .gallery-img {
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition-property: all;
  transition-duration: 1s;
}

.gallery figure:hover .gallery-img {
  transform: rotateY(180deg);
}

.gallery figure figcaption {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
  background-color: rgba(0, 0, 0, 0.5);
  transition-property: all;
  transition-duration: 1s;
  backface-visibility: hidden;
}

.gallery figure:hover figcaption {
  transform: rotateY(0deg);
}

.gallery figure figcaption span {
  margin: auto;
}

/* Modal */
.gallery-modal {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  cursor: pointer;
  display: none;
}

.gallery-modal .gallery-modal-content {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.gallery-modal .gallery-modal-img {
  width: 400px;
  height: 320px;
  margin: auto;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@import url("https://fonts.googleapis.com/css?family=Ubuntu");.demo-bird-gallery {  color: #fff;  background-color: #000;  font-family: "Ubuntu", sans-serif;}.gallery {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  max-width: 950px;  margin: auto;}.gallery figure {  position: relative;  width: 200px;  height: 160px;  perspective: 400px;}.gallery figure .gallery-img {  width: 100%;  height: 100%;  border: 2px solid #fff;  background-repeat: no-repeat;  background-position: center;  background-size: cover;  transition-property: all;  transition-duration: 1s;}.gallery figure:hover .gallery-img {  transform: rotateY(180deg);}.gallery figure figcaption {  position: absolute;  top: 2px;  left: 2px;  display: flex;  justify-content: center;  width: 100%;  height: 100%;  transform: rotateY(-180deg);  background-color: rgba(0, 0, 0, 0.5);  transition-property: all;  transition-duration: 1s;  backface-visibility: hidden;}.gallery figure:hover figcaption {  transform: rotateY(0deg);}.gallery figure figcaption span {  margin: auto;}/* Modal */.gallery-modal {  position: fixed;  top: 0px;  left: 0px;  right: 0;  bottom: 0;  display: flex;  background-color: rgba(0, 0, 0, 0.8);  z-index: 10;  cursor: pointer;  display: none;}.gallery-modal .gallery-modal-content {  display: flex;  height: 100vh;  width: 100vw;}.gallery-modal .gallery-modal-img {  width: 400px;  height: 320px;  margin: auto;  border: 2px solid #fff;  background-repeat: no-repeat;  background-position: center;  background-size: cover;}

jQuery(document).ready(function ($) {

    $(".gallery figure").click(function () {
        // Récupération de l'image cliquée
        let img = $(this).find(".gallery-img").css("background-image");

        // Insertion de l'image dans la modale
        $(".gallery-modal .gallery-modal-img")
            .css("background-image", img);

        // Affichage de la modale
        $(".gallery-modal").fadeIn();
    });

    $(".gallery-modal").click(function () {

        // Fermeture de la modale
        $(this).fadeOut(function () {
            $(this).find(".gallery-modal-img").css("background-image", "");
        });
    });
});

jQuery(document).ready(function ($) {    $(".gallery figure").click(function () {        // Récupération de l'image cliquée        let img = $(this).find(".gallery-img").css("background-image");        // Insertion de l'image dans la modale        $(".gallery-modal .gallery-modal-img")            .css("background-image", img);        // Affichage de la modale        $(".gallery-modal").fadeIn();    });    $(".gallery-modal").click(function () {        // Fermeture de la modale        $(this).fadeOut(function () {            $(this).find(".gallery-modal-img").css("background-image", "");        });    });});

document.addEventListener("DOMContentLoaded", () => {

    const modal = document.querySelector(".gallery-modal");
    const modalImage = modal.querySelector(".gallery-modal-img");

    // Ouverture de la modale
    document.querySelectorAll(".gallery figure").forEach(figure => {
        figure.addEventListener("click", () => {

            const img = figure.querySelector(".gallery-img");
            const background = getComputedStyle(img).backgroundImage;

            modalImage.style.backgroundImage = background;
            modal.style.display = "flex";
        });
    });

    // Fermeture de la modale
    modal.addEventListener("click", () => {
        modal.style.display = "none";
        modalImage.style.backgroundImage = "";
    });

});

document.addEventListener("DOMContentLoaded", () => {    const modal = document.querySelector(".gallery-modal");    const modalImage = modal.querySelector(".gallery-modal-img");    // Ouverture de la modale    document.querySelectorAll(".gallery figure").forEach(figure => {        figure.addEventListener("click", () => {            const img = figure.querySelector(".gallery-img");            const background = getComputedStyle(img).backgroundImage;            modalImage.style.backgroundImage = background;            modal.style.display = "flex";        });    });    // Fermeture de la modale    modal.addEventListener("click", () => {        modal.style.display = "none";        modalImage.style.backgroundImage = "";    });});

Sauf mention contraire*, l’article Transitions CSS : Birds Gallery CSS17 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Transitions CSS : Birds Gallery CSS17

Consignes de l’exercice

Transitions CSS : Birds Gallery CSS17