Dernière modification : décembre 2022
Le code :
<ul class="flip">
<li>
<a href="#image1">
<img src="votreimage.jpg" alt>
</a>
<div class="votre-galerie" id="image1">
<div>
<img src="image.jpg" class="image" alt>
<a href="#image3" class="precedent"></a>
<a href="#image2" class="suivant"></a>
<a href="#" class="ferm"></a>
</div>
</div>
</li>
<li>
<a href="#image2">
<img src="votreimage" alt>
</a>
<div class="votre-galerie" id="image2">
<div>
<img src="image.jpg" class="image" alt>
<a href="#image1" class="precedent"></a>
<a href="#image3" class="suivant"></a>
<a href="#" class="ferm"></a>
</div>
</div>
</li>
<li>
<a href="#image3">
<img src="votreimage" alt>
</a>
<div class="votre-galerie" id="image3">
<div>
<img src="image.jpg" class="image" alt>
<a href="#image2" class="precedent"></a>
<a href="#image1" class="suivant"></a>
<a href="#" class="ferm"></a>
</div>
</div>
</li>
</ul>
*,*::before,*::after{box-sizing:border-box}
ul{padding:0;margin:0;list-style-type: none;}
img{max-width:100%;display:block}
.flip{
display: flex;
flex-flow: wrap;
justify-content: space-around;
gap: 1rem;
margin: 2rem auto
}
.flip a img{
max-width:200px;
aspect-ratio:3/2;
border: 3px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.4)
}
/*galerie*/
.votre-galerie{display: none}/*on rend invisible la galerie d'images*/
.votre-galerie:target{
z-index: 1;
display: flex;
background: hsla(0,0%,0%,.8);
width: 100%;
height: 100vh;
top: 0;
left: 0;
position: fixed
}/*on rend visible lorsqu'on clique*/
.votre-galerie div{
margin:auto;
position:relative;
max-width:90%
}
.suivant,
.precedent{
width: 3vmin;
aspect-ratio: 1;
margin-top: -1.5vmin;
top: 50%;
position: absolute;
border-width: .5vmin .5vmin 0 0;
border-style: solid;
border-color: white;
}
.precedent{
transform: rotate(-135deg);
left: 1rem;
}
.suivant{
right: 1rem;
transform: rotate(45deg);
}
.suivant,
.precedent,
.ferm{animation: controle .4s .4s backwards;}
@keyframes controle{
0%{
opacity:0
}
100%{
opacity: 1
}
}
.image{backface-visibility: hidden;}
.votre-galerie:target .image{
max-height: 80vmin;
max-width: 100%;
animation: votre-animation 1s
}
/*fermeture */
.ferm{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 5vmin;
aspect-ratio: 1;
}
.ferm::after {
transform: rotate(-45deg);
}
.ferm::before,
.ferm::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #FFF;
border-radius: 4px;
}
.ferm::before {
transform: rotate(45deg);
}
/*On applique l'animation lorsqu'on clique sur une image*/
@keyframes votre-animation{
0%{
transform: scale(0) rotatey(180deg)
}
50%{
transform:scale(1) rotatey(0deg)
}
}