Dernière modification : septembre 2022
<input type="radio" id="tout" name="diapo" checked>
<label for="tout">TOUT</label>
<input type="radio" id="animaux" name="diapo">
<label for="animaux">Animaux</label>
<input type="radio" id="paysages" name="diapo">
<label for="paysages">Paysages</label>
<input type="radio" id="personnes" name="diapo">
<label for="personnes">Personnes</label>
<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 class="animaux">
<label for="fenetre1">
<img src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre2">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre3">
<img src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre4">
<img src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre5">
<img src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre6">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre7">
<img src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre8">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<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>
*{box-sizing: border-box}
body,ul{margin: 0}
ul{padding:0;list-style-type: none;}
img{display:block;height:auto}
input{
display:none
}/*on cache tous les input*/
label{
cursor:pointer
}/*on pointe tous les labels (tri + ouverture-fermeture lightbox*/
/*on personnalise les label*/
input[name="diapo"] + label{
display: inline-flex;
justify-content: center;
font-size: 1.25rem;
background-color: #6753ea;
color: white;
padding: 5px 20px;
min-width: 15ch;
margin: .5rem;
}
input[name="diapo"]:checked + label{
color:currentcolor;
background-color: #aaa
}
/*quand on clique sur un label pour montrer qu'il est actif*/
/*liste des images*/
.diaporama{
display:grid;grid-template-columns: repeat(3,1fr);
gap:1rem;
margin: 2rem auto;
justify-items: center
}
.diaporama li{
will-change: opacity;
opacity: 1;/*on rend visible toutes les images pour pouvoir ensuite faire disparaitre certaines images avec le filtre en jouant sur l'opacite*/
transition: opacity .5s linear /*transition opacite sur les images*/
}
.diaporama li img{
width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
max-width: 200px;
box-shadow: 0 0 1rem hsla(0,0%,0%,.2);
border-radius: .5rem;
}
/*filtre*/
#animaux:checked ~ .diaporama li:not(.animaux),
#paysages:checked ~ .diaporama li:not(.paysages),
#personnes:checked ~ .diaporama li:not(.personnes){
opacity: .1
}/*ici on indique que les images non selectionnees (li:not) par le filtre ne seront presque plus visibles*/
#animaux:checked ~ .diaporama li:not(.animaux) label,
#personnes:checked ~ .diaporama li:not(.personnes) label,
#paysages:checked ~ .diaporama li:not(.paysages) label{
pointer-events: none;
}
/*nombre de photos*/
input[name="diapo"]:checked + label:after{
content: '(3)';
padding-left: 5px
}
#tout:checked + label:after{
content: '(9)';
padding-left: 5px
}
.sous-couche,
.fenetre{
position:fixed
}
.fermer,
.fenetre img{
position:absolute
}
.fenetre{
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0
}
.fermer{
aspect-ratio:1;
display: flex;
justify-content: center;
align-items: center;
right: 1rem;
top: 1rem;
z-index: 1;
width: 3em;
}
.fermer::before,.fermer::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #fff;
border-radius: 4px;
}
.fermer::before {
transform: rotate(45deg);
}
.fermer::after {
transform: rotate(-45deg);
}
.fenetre img{
max-height: 90%;
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;
transition: .4s opacity linear .4s
}
.sous-couche{
opacity: 0;
left: 0;
top: 0;
background: hsla(0, 0%, 0%, 0.8);
will-change: opacity;
transition:.4s opacity linear;
z-index: 1
}
.cache:checked~.sous-couche{
height: 100%;
width: 100%;
opacity: 1
}