Lightbox en CSS (avec pseudo-classe :target)


✔️ Support navigateurs :

Chrome Edge firefox Internet Explorer Opera Safari iOS Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo iOS Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️



<svg height="0" width="0">
<defs>
<symbol id="suivant" viewBox="0 0 492 492"><path fill=white d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-184.06 184.06c-5.064 5.068-7.86 11.824-7.86 19.028 0 7.212 2.796 13.968 7.86 19.04l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86L382.678 265c5.076-5.084 7.864-11.872 7.848-19.088.016-7.244-2.772-14.028-7.848-19.108z"/></symbol>
<symbol id="precedent" viewBox="0 0 492 492"><path fill=white d="M198.608 246.104L382.664 62.04c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476 2.792 354.712 0 347.504 0s-13.964 2.792-19.028 7.864L109.328 227.008c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06L198.608 246.104z"/></symbol>
<symbol id="fermer" viewBox="0 0 47.971 47.971"><path fill=white d="M28.228 23.986L47.092 5.122a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 1 0 4.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 0 0 0-4.242L28.228 23.986z"/></symbol>
</defs>
</svg>
	
<ul class="diapo">
	
<li>
<a href="#image1">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image1">
<img src="image.jpg" alt>
<span class=des>Description de l'image</span>
<a href="#image9" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image2" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image2">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image2">
<img src="image.jpg" alt>
<span class=des>Description de l'image</span>
<a href="#image1" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image3" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image3">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image3">
<img src="image.jpg" alt>											
<span class=des>Description de l'image</span>
<a href="#image2" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image4" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image4">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image4">
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image3" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image5" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image5">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image5">
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image4" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image6" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image6"><img src="image.jpg" alt>
</a>
<span class="trans-image" id="image6">
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image5" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image7" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image7">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image7">
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image6" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image8" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
<li>
<a href="#image8">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image8">
<img src="image.jpg" alt>						
<span class=des>Description de l'image</span>
<a href="#image7" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image9" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>
	
	
<li>
<a href="#image9">
<img src="image.jpg" alt>
</a>
<span class="trans-image" id="image9">
<img src="image.jpg" alt>					
<span class=des>Description de l'image</span>
<a href="#image8" class="prece"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#precedent"></use></svg></a>
<a href="#image1" class="suiva"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#suivant"></use></svg></a>
<a href="#" class="ferm"><svg height="40" width="40" role="img" aria-hidden="true"><use href="#fermer"></use></svg></a>
</span>
</li>	
	
	
</ul>



.diapo{
	
display:flex;
flex-direction:column;
align-items:center;
margin:2rem auto
	
	}
	
.diapo a{
	
	text-decoration:none
	
	}

.diapo li{
	
	margin-top:1rem
	
	}	
    
.diapo li a img{
	
display: flex;
height: auto;
max-width: 220px;
border: 3px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.4)
	
	}


/*lightbox*/

/*description image*/
.des{

position: absolute;
left: 0;
bottom: -100%;
padding: 10px;
color: #fff;
text-align: center;
background: hsla(0,0%,0%,.5);
width: 100%;
height: auto
	
	}


/*boutons suivant et precedent lightbox*/

.prece svg,
.suiva svg{margin-top:.25rem}
	
.prece,
.suiva{

background: black;
height: 50px;
width: 50px;
display: none;
opacity: .6;
z-index: 2;
position: absolute;
top: 50%;
transform: translatey(-50%)
	
	}

.suiva{
	
	right:0
		
	}
	
.prece{
	
	left:0
	
	}



.prece:hover,
.suiva:hover{
	
transition: opacity .6s linear;
opacity: 1
	
	}

/*fermeture lightbox */
.ferm{

position: absolute;
top: .25rem;
right: .25rem;

}
    

	
	
	
/*fin fermeture lightbox */

/*design image et effet lightbox */	
	
.trans-image{
	
width: 0;
height: 0;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
background: hsla(0,0%,0%,.8)
	
	}
	
.trans-image img{
	
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transform: translate3d(-50%,-50%,0);
border: 5px solid #fff
	
	}
	
.trans-image:target{
	
	width: 100%;
	height: 100%
	
	}
	
.trans-image:target > img{

max-height: 100vh;
max-width: 98%;
animation: effet .8s .4s forwards
	
	}	
	

.trans-image:target > .prece,
.trans-image:target > .suiva,
.trans-image:target > .ferm{

display: block
	
}



.trans-image:target > .des{
	
animation: effet1 .4s .6s forwards
	
	}


/*animations*/

@keyframes effet{
	
	to{
		
		opacity: 1
	
	}
	
	}
	
@keyframes effet1{
	
	to{
		
		bottom: 0
	
	}
	
	}

  
@media screen and (min-width:37.5rem){ 
	
.diapo{
	
display: flex;
flex-flow: row wrap
	}

.diapo li{
	
	margin-right: auto;
	margin-left: auto
		
	}
}