Essai



Vignette



Plein écran

.overlay {
/* Affichage par dessus l’ensemble de la page */
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);

/* Centrage horizontal et vertical de l’image */
display: flex;
align-items: center;
/*text-align: center; ne fonctionne pas*/

/* On masque tout cela par défaut */
visibility: hidden;
}

.overlay img{
/* Taille maximale de l’image */
margin-left: auto;
margin-right: auto;
max-width: 90%;
max-height: 90%;

/* On conserve le ratio de l’image */
width: auto;
height: auto;
}
.overlay:target {
visibility: visible;
outline: none;
cursor: default;
}