CSS popover lightbox (responsive)

Votre navigateur ne supporte pas cette démonstration

<ul>

<li>
<img src="image.jpg" alt loading="lazy">
<button popovertarget="photo-1" aria-label="Agrandir photo"></button>
<div id="photo-1" popover="manual" class="popover" data-src="url(image.jpg)">
<button popovertarget="photo-1" popovertargetaction="hide">✕</button>
</div>
</li>
	
<li>
<img src="image.jpg" alt loading="lazy">
<button popovertarget="photo-2" aria-label="Agrandir photo"></button>
<div id="photo-2" popover="manual" class="popover" data-src="url(image.jpg)">
<button popovertarget="photo-2" popovertargetaction="hide">✕</button>
</div>
</li>
	
...	
	
	
</ul>
	

*{box-sizing:border-box}	


button{all:unset;cursor: pointer} 
    
ul{
padding-left: 0;
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap:1rem;max-width:80vw;

	
	}

 ul li{display:grid}
 ul li>*{grid-area:1/1}	
	
ul li img{

width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
height:100%;
box-shadow: 0 0 1rem hsla(0,0%,0%,.2);
border-radius: .5rem;
		
}   
    
    
[popover] {
width: 95%;
max-width:1200px;
margin:5dvh auto;
padding:0;
border:0;
height:90dvh; 
}

[popover] button {
position: fixed;
right: 20px;
top: 20px;
color: #fff;
font-size: 2rem;

}

[popover],
[popover]::backdrop {
 --pop: 0;
opacity: calc(1 - var(--pop, 1));

}
@starting-style {
[popover],
[popover]:popover-open::backdrop{
   --pop: 1;
  }
}
[popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.7);

}	
	
.popover{
--miniature: attr(data-src type(<image>), "");background: var(--miniature, transparent);
background-position: center;
background-repeat: no-repeat;
background-size: contain;	
 
}

	
@media(prefers-reduced-motion: no-preference) {
[popover],[popover]::backdrop { transition:  opacity .25s }
[popover]{ transition-delay: .25s }

}