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 en CSS (avec pseudo-classe :target)

Dernière modification : octobre 2022

  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image
  • Description de l'image


	
<ul class="diapo">
	
<li>
<a href="#image1">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image1">

<div>
<img src="image.jpg" alt>
<span class=des>Description de l'image</span>
<a href="#image9" class="prece"></a>
<a href="#image2" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image2">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image2">

<div>
<img src="image.jpg" alt>
<span class=des>Description de l'image</span>
<a href="#image1" class="prece"></a>
<a href="#image3" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image3">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image3">

<div>
<img src="image.jpg" alt>											
<span class=des>Description de l'image</span>
<a href="#image2" class="prece"></a>
<a href="#image4" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image4">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image4">

<div>
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image3" class="prece"></a>
<a href="#image5" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image5">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image5">

<div>
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image4" class="prece"></a>
<a href="#image6" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image6"><img src="image.jpg" alt>
</a>
<div class="trans-image" id="image6">

<div>
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image5" class="prece"></a>
<a href="#image7" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image7">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image7">

<div>
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image6" class="prece"></a>
<a href="#image8" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
<li>
<a href="#image8">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image8">

<div>
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image7" class="prece"></a>
<a href="#image9" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>
	
	
<li>
<a href="#image9">
<img src="image.jpg" alt>
</a>
<div class="trans-image" id="image9">

<div>
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image8" class="prece"></a>
<a href="#image1" class="suiva"></a>
<a href="#" class="ferm"></a>

</div>
</div>
</li>	
	
	
</ul>




*{box-sizing:border-box}	
	
img {max-width: 100%;display:block}

	
.diapo{
	
display:grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
gap:1rem;
margin: 2rem auto;	
	}

  
.diapo li a img{
	

border: 3px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.4)
	
	}


/*lightbox*/

/*description image*/
.des{

position: absolute;
left: 0;
right:0;
bottom: 0;

	
	}


/* lightbox */	
	
.trans-image{
	
display:none;

}
	
	
.trans-image:target{

z-index:2;
display: flex;
background: hsla(0,0%,0%,.8);
bottom:0;
right:0;
top: 0;
left: 0;
position: fixed;

}
	
.trans-image div{
	
margin:auto;
position:relative;

max-width:90%;
animation: fade .4s;

	
	}
	

	
.trans-image:target div img{

border:5px solid white;
max-height: 80vh;
width:100%;

	
	}	
	
.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);
	
	}
	
  .ferm{

display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 1rem;
top: 1rem;
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);
	
}	
	
	
.suivant,
.precedent,
.ferm{animation: fade .4s .4s backwards;}	
	
	
@keyframes fade{
	
	0%{
		
	opacity:0
	
	}
	
	100%{
		opacity: 1
	
	}
	
	
	
	}	
	
	


.trans-image:target div .des{
	
padding: 10px;
color: #fff;
text-align: center;
background: hsla(0,0%,0%,.5);	

	
	}

    



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.