Votre navigateur ne supporte pas cette démonstration
<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>
<ul class="filtre">
<li class="animaux">
<img src="image.jpg" alt>
</li>
<li class="personnes">
<img src="image.jpg" alt>
</li>
<li class="paysages">
<img src="image.jpg" alt>
</li>
<li class="personnes">
<img src="image.jpg" alt>
</li>
<li class="animaux">
<img src="image.jpg" alt>
</li>
<li class="personnes">
<img src="image.jpg" alt>
</li>
<li class="paysages">
<img src="image.jpg" alt>
</li>
<li class="animaux">
<img src="image.jpg" alt>
</li>
<li class="paysages">
<img src="image.jpg" alt>
</li>
</ul>
*{box-sizing: border-box}
input[name="filtre"] + label{
display: inline-flex;
justify-content: center;
font-size: 1.25rem;
background-color: #c9c9c9;
color:#555;
padding: 5px 20px;
cursor:pointer
}
input[name="filtre"]:checked + label{
background-color: #6753ea;
color:white;
}
/*quand on clique sur un label pour montrer qu'il est actif*/
.filtre{
list-style-type:none;
padding:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap:1rem;
margin: 2rem auto;
justify-items: center
}
.filtre 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*/
}
.filtre li img{
width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
height:100%;
box-shadow: 0 0 1rem hsla(0,0%,0%,.2);
border-radius: .5rem;
}
/*filtre*/
/*ici on indique que les images non selectionnees (li:not) par le filtre ne seront presque plus visibles*/
:has(#animaux:checked) li:not(.animaux),
:has(#paysages:checked) li:not(.paysages),
:has(#personnes:checked) li:not(.personnes){opacity:.1}
/*nombre de photos*/
input[name="filtre"]:checked + label::after{
content: '(3)';
padding-left: 5px
}
#tout:checked + label::after{
content: '(9)';
padding-left: 5px
}