<div class="cadre-demo">
<input type="radio" name="galerie" id="fermer">
<input type="radio" name="galerie" id="fenetre1">
<input type="radio" name="galerie" id="fenetre2">
<input type="radio" name="galerie" id="fenetre3">
<input type="radio" name="galerie" id="fenetre4">
<input type="radio" name="galerie" id="fenetre5">
<input type="radio" name="galerie" id="fenetre6">
<input type="radio" name="galerie" id="fenetre7">
<input type="radio" name="galerie" id="fenetre8">
<input type="radio" name="galerie" id="fenetre9">
<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>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre2">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre3">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre4">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre5">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre6">
<label for="fermer" class="fermer"></label
><img src="image.jpg" alt>
</div>
<div class="fenetre fenetre7">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre8">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre9">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
</div>
*,*::after,*::before{box-sizing:border-box}
.cadre-demo input{
position:absolute;
left:-100vw;
top:0;
bottom:0
}
label{cursor:pointer}
img{max-width:100%;}
/*liste des images*/
.diaporama{
max-width:800px;
padding:0;
list-style-type: none;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap:1rem;
margin: 2rem auto;
}
.diaporama label{display: block;}
.diaporama li img{
display:block;
width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
box-shadow: 0 0 1rem hsla(0,0%,0%,.2);
border-radius: .5rem;
}
@supports not(aspect-ratio: 3/2) {
.diaporama li {position:relative}
.diaporama li img{position:absolute;top:0;left:0}
}
.fermer,
.fenetre img{
position:absolute
}
.fenetre{
position:fixed;
background: hsla(0, 0%, 0%, 0.8);
z-index: 2;
inset:0;
margin:auto;
visibility: hidden;
opacity: 0;
will-change: opacity;
transition: .4s opacity linear .2s;
}
.fermer{
aspect-ratio:1;
display: flex;
justify-content: center;
align-items: center;
right: 1rem;
top: 1rem;
z-index: 1;
width: 3rem;
}
@supports not(aspect-ratio:1) {
.fermer{height: 3rem;}
}
.fermer::before,
.fermer::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #FFF;
border-radius: 4px;
}
.fermer::before {
rotate:45deg;
}
.fermer::after {
rotate:-45deg;
}
.fenetre img{
max-height: 90%;
max-width: 90%;
margin: auto;
inset: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;
}
