Diaporama responsive CSS Grid




<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">
<label for="fermer" class="sous-couche"></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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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 fill="white" 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}



input{
	
	position:absolute;
	left:-9999px
	
	}/*on cache tous les input*/
	
	label{
		
	cursor: pointer	
		
	}

.diaporama{

display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-gap: 1rem;
	
	}

.diaporama li label{
	
	
outline: 5px solid #7A5FFF;
transition:outline .4s;
display: flex;
height: 100%
	
	}
	
.diaporama li label:hover{
	
outline-color: #01FF89
	
	}

.diaporama li img{
margin:0; 
display:flex;
object-fit: cover;
transition: all .2s ease-in;
	
}

    
.sous-couche,
.fenetre{
		
position:fixed
		
	}
   
.suivant,
.precedent,
.fermer,
.fenetre img{
	
position:absolute
	
	}
    
.fermer,	
.suivant,
.precedent{
display:flex;
justify-content: center;	
width: 3.125rem;
height: 3.125rem;
z-index: 2
	
	}	
	
.suivant{
	bottom: 0;
	right: 0
	
	}

.precedent{
	
	bottom: 0;
	left: 0
	
	}
	

@media (min-width:62.75rem){
	
	
	.precedent,	
	.suivant	{

	top:50%;
	transform:translatey(-50%);
		
	}
	}
	
.fenetre{
	
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform:scale(0);
visibility: hidden;
opacity: 0
	
	}
    
.fermer{

right: 0;
top:.25rem;

	
	}
    
.fenetre img{
	
max-height: 90%;
max-height: 80vmin;
max-width: 90%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0
	
	}
    
#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);
transition: .4s opacity linear,transform .4s}
    
    
    
.sous-couche{
opacity: 0;
left: 0;
top: 0;
background: hsla(0, 0%, 0%, 0.8);
transition:.4s opacity linear;
z-index: 1
	}
    
.cache:checked~.sous-couche{
	
height: 100%;
width: 100%;
opacity: 1
	
	}