Simple CSS view-transition lightbox

Votre navigateur ne supporte pas cette démonstration

<!--
A placer dans la page index
-->

<ul class="grid">

<li><a href="photo-1.html" style="view-transition-name: photo-1;"><img src="/blog/images/1-mini.jpg" alt></a>
<li><a href="photo-2.html" style="view-transition-name: photo-2;"><img src="/blog/images/2-mini.jpg" alt></a>
<li><a href="photo-3.html" style="view-transition-name: photo-3;"><img src="/blog/images/3-mini.jpg" alt></a>

...
    
</ul>
	
<!--
A placer dans une autre page et répéter la même chose sur les autres pages. Une page = une photo.
-->   
<div id="photo-1" style="view-transition-name: photo-1;"> <!--bien penser à changer le nom des transitions-->
<img src="/blog/images/1.jpg" alt>
<a href="index.html">✕</a>
</div>

/*pour la première page*/  
*{box-sizing: border-box;}
img{max-width:100%;height:auto;vertical-align: middle;}
ul{list-style-type: none;padding-left: 0;margin:0}
  
@view-transition{navigation:auto;}
	
.grid {

display:grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 1rem;

  
}

.grid li img{
  
display:block;
height:100%;
width:100%;
aspect-ratio: 3/2;
object-fit: cover;
  
  }

div{
  
max-width: 80vw; 
display: grid;
  
  }
 
div>*{
  
  grid-area: 1/1
  
  }
  
div img {
width: 100%;
max-height: 80dvh;
object-fit: contain;
}

 div a{
  place-self: start end; 
  text-decoration: none;
  color: white;
  font-size: 2vw;
  margin: 1rem;
  }   
  /*fin pour la première page*/ 
  
/*pour toutes les autres pages*/ 

*{box-sizing: border-box;}
img{max-width:100%;height:auto;vertical-align: middle;}
ul{list-style-type: none;padding-left: 0;margin:0}
  
@view-transition{navigation:auto;}
 
div{max-width:80vw; display:grid;}
 
div&*{grid-area:1/1}
  
div img {
width: 100%;
max-height:80dvh;
object-fit: contain;
}

 div a{
  place-self: start end; 
  text-decoration:none;
  color:white;
  font-size:2vw;
   margin:1vw;
  } 
  /*fin pour toutes les autres pages*/