Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Diaporama responsive CSS Grid

Dernière modification : août 2022



<input type="radio" name="galerie" id="fermer">
<input type="radio" name="galerie" id="fenetre1" class="cache">
<input type="radio" name="galerie" id="fenetre2" class="cache">
<input type="radio" name="galerie" id="fenetre3" class="cache">
<input type="radio" name="galerie" id="fenetre4" class="cache">
<input type="radio" name="galerie" id="fenetre5" class="cache">
<input type="radio" name="galerie" id="fenetre6" class="cache">
<input type="radio" name="galerie" id="fenetre7" class="cache">
<input type="radio" name="galerie" id="fenetre8" class="cache">
<input type="radio" name="galerie" id="fenetre9" class="cache">

<div class="sous-couche"></div>

<label for="fermer"></label>

<ul class="diaporama">

<li>
<label for="fenetre1">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre2">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre3">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre4">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre5">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre6">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre7">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre8">
<img src="image.jpg" alt>
</label>
</li>
<li>
<label for="fenetre9">
<img src="image.jpg" alt>
</label>
</li>
</ul>
<div class="fenetre fenetre1">
<label for="fermer" class="fermer"></label>
<label for="fenetre2" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>	
<label for="fenetre9" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre2">
<label for="fermer" class="fermer"></label>
<label for="fenetre3" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre1" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre3">
<label for="fermer" class="fermer"></label>
<label for="fenetre4" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre2" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre4">
<label for="fermer" class="fermer"></label>
<label for="fenetre5" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre3" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre5">
<label for="fermer" class="fermer"></label>
<label for="fenetre6" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre4" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>   
<div class="fenetre fenetre6">
<label for="fermer" class="fermer"></label>
<label for="fenetre7" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre5" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>    
<div class="fenetre fenetre7">
<label for="fermer" class="fermer"></label>
<label for="fenetre8" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre6" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>    
<div class="fenetre fenetre8">
<label for="fermer" class="fermer"></label>
<label for="fenetre9" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre7" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>    
<div class="fenetre fenetre9">
<label for="fermer" class="fermer"></label>
<label for="fenetre1" class="suivant"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007a1.112 1.112 0 0 0-1.587 0 1.12 1.12 0 0 0 0 1.571l8.047 8.047H1.111A1.106 1.106 0 0 0 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587a1.112 1.112 0 0 0 1.587 0l9.952-9.952a1.093 1.093 0 0 0 0-1.571l-9.952-9.953z" fill="white"/></svg></label>
<label for="fenetre8" class="precedent"><svg height="40" width="40" viewBox="0 0 31.49 31.49"><path d="M10.285 5.007a1.112 1.112 0 0 1 1.587 0 1.12 1.12 0 0 1 0 1.571l-8.047 8.047h26.554a1.106 1.106 0 0 1 1.111 1.112c0 .619-.492 1.127-1.111 1.127H3.825l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 0 1-1.587 0L.333 16.531a1.093 1.093 0 0 1 0-1.571z" fill="white"/></svg></label>	
<img src="image.jpg" alt>
</div>




*{box-sizing: border-box}
	
body {
	
margin: 0;
display: grid;
grid-template-areas: "lightbox";
min-height:100vh;
	
}
	
ul{
	
margin: 0;
padding-left: 0;
list-style-type: none
	
	}
	
img{
	
max-width: 100%;
display: block
	
	}

input{position:absolute;left:-9999px}
	
label{cursor: pointer}

.diaporama{

display: grid;
padding: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
gap: 1rem;
place-self: start;
	
	}


.diaporama img,
.fenetre img{
	
aspect-ratio: 3/2;
width: 100%;
object-fit: cover;
	
}
	
body>*{grid-area:lightbox;}
	
.fenetre{
place-self: center;	
will-change: opacity,transform;
transform: scale(0);
visibility: hidden;
opacity: 0;
display: grid;
padding: 1rem;
grid-template-areas: "fenetre"
	}	
	
.fenetre>*{grid-area: fenetre}	
	
#fenetre1:checked ~ .fenetre1,
#fenetre2:checked ~ .fenetre2,
#fenetre3:checked ~ .fenetre3,
#fenetre4:checked ~ .fenetre4,
#fenetre5:checked ~ .fenetre5,
#fenetre6:checked ~ .fenetre6,
#fenetre7:checked ~ .fenetre7,
#fenetre8:checked ~ .fenetre8,
#fenetre9:checked ~ .fenetre9{
	
visibility: visible;
opacity: 1;
transform:scale(1);
z-index:1;
transition: .4s opacity linear,transform ease-in-out .4s
	
	}	
	
	
.sous-couche{
	
opacity: 0;
visibility: hidden;
background: hsla(0, 0%, 0%, 0.8);
transition:.4s opacity linear;

	}
    
.cache:checked~.sous-couche{
	
visibility: visible;	
grid-area: 1/1/-1/-1;
opacity: 1;
z-index: 1
	
	}  
	
.fenetre img{
	
max-height: 80vh;
	
	}
	
label[for="fermer"]{
	
z-index: 1;
place-self: start end;
margin: .5rem;
	
	}
	
.suivant,
.precedent{
	
z-index: 1;
background: rgba(0, 0, 0, 0.4)
	
	}
	
.suivant{place-self: center end;}
.precedent{place-self: center start;}





Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.