Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Lightbox responsive effet flip CSS

Dernière modification : octobre 2022



<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)
	
	}
	
	
	
	}
	
    



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.