Aller au contenu principal
Guillaume Duverger Code & graphisme

Lightbox en CSS (avec pseudo-classe :target)



	
<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="precedent"></a>
<a href="#image2" class="suivant"></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="precedent"></a>
<a href="#image3" class="suivant"></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="precedent"></a>
<a href="#image4" class="suivant"></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="precedent"></a>
<a href="#image5" class="suivant"></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="precedent"></a>
<a href="#image6" class="suivant"></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="precedent"></a>
<a href="#image7" class="suivant"></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="precedent"></a>
<a href="#image8" class="suivant"></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="precedent"></a>
<a href="#image9" class="suivant"></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="precedent"></a>
<a href="#image1" class="suivant"></a>
<a href="#" class="ferm"></a>

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





*,*::after,*::before{box-sizing:border-box}

img{max-width: 100%}
	
	
.diapo{
	
max-width:800px;
padding:0;
margin:auto;
list-style-type: none;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
gap:1rem;
	
	}
	
.diapo li >a{display: block;}
  
.diapo li >a img{

display:block;
width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
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;
opacity:0;
transition:display .8s,opacity .8s;
	
}
	
	
.trans-image:target{


display: flex;
background: hsla(0,0%,0%,.8);
inset:0;
position: fixed;
opacity:1;

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

	
.trans-image:target div img{

max-height: 80vh;


	
	}	
	
.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{
	
rotate:-135deg;
left: 1rem;
	
	}

	
 .suivant{

right: 1rem;
rotate:45deg;
	
	}
	
  .ferm{

display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 1rem;
top: 1rem;
width: 5vmin;
aspect-ratio: 1;	
	}
	
.ferm::after {
	
  rotate:-45deg;
}
	
.ferm::before, 
.ferm::after {
	
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #FFF;
  border-radius: 4px;
}
	
.ferm::before {
	
rotate:45deg;
	
}	
	

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

	
	}

@supports not (aspect-ratio: 1)	{
	
.suivant,
.precedent{height:3vmin}
.ferm{height:5vmin}
	
	}
	
	
@starting-style {

.trans-image:target {

opacity:0

}

}