Plein écran au clic

Clic bouton pour ouvrir puis clic image pour fermer

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; background: url('http://ekladata.com/M_L1T7USrskeh_CcPAC7-z1362s@1152x648.jpg'); background-size: cover; text-align: left;"><input id="pt1" class="pt" type="text" value="A" /> <input id="pt2" class="pt" type="text" value="B" /> <input id="pt3" class="pt" type="text" value="C" /> <input id="pt4" class="pt" type="text" value="D" /> <input id="pt5" class="pt" type="text" value="E" /><input id="pt6" class="pt" type="text" value="F" /><input id="pt7" class="pt" type="text" value="G" /><input id="pt8" class="pt" type="text" value="H" /> <img id="fd1" src="http://ekladata.com/xlYmAn8mFN2GmIwUrLO7SwL6CkQ.jpg" alt="" /> <img id="fd2" src="http://ekladata.com/asD-zskFv1D1TwMdODEvkXve02o.jpg" alt="" /> <img id="fd3" src="http://ekladata.com/4BkeHJR-54LhXlEdPgKa_9O5ZEs.jpg" alt="" /> <img id="fd4" src="http://ekladata.com/TFilkHFTijs5iC9g3tv8wM5pCyw.jpg" alt="" /> <img id="fd5" src="http://ekladata.com/GR3LezuE9UP9hdoesj5kmXLjTgA.jpg" alt="" /> <img id="fd6" src="http://ekladata.com/WcAdLJTNmUF128fYtSqItgoR84U.jpg" alt="" /> <img id="fd7" src="http://ekladata.com/EGQaJ6xx3k0CqxZ_SEvPvYM3J_0.jpg" alt="" /> <img id="fd8" src="http://ekladata.com/a5n0SS93C0BgYXjpfhTfantbsVI.jpg" alt="" />
<p id="stp">Clic bouton pour ouvrir puis clic image pour fermer</p>
</div>
<style><!--
.pt{position:absolute; z-index:10; width:2vw; height:2vw; border:none; border-radius:50%; text-align:center; line-height:2vw; font-size:1.5vw; text-shadow:0.1vh 0.1vh black;box-shadow:inset 0.4vh 0.4vh 0.8vh black;}
#pt1{transform:translate(57vw,6vw);}
#pt2{transform:translate(57vw,9vw);}
#pt3{transform:translate(57vw,12vw);}
#pt4{transform:translate(57vw,15vw);}
#pt5{transform:translate(57vw,18vw);}
#pt6{transform:translate(57vw,21vw);}
#pt7{transform:translate(57vw,24vw);}
#pt8{transform:translate(57vw,27vw);}
#stp{position:absolute; z-index:1; width:25vw; background:rgba(0,0,0,0.5); text-align:center; font-size:1.5vw; line-height:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(35vw,0vw);}
#fd1, #fd2, #fd3, #fd4, #fd5, #fd6, #fd7, #fd8{position:absolute; z-index:10; width:0vw; height:0vw;  left:50vw; top:30vw; transition:all 1s linear;}

#pt1:focus ~ #fd1,#pt2:focus ~ #fd2,#pt3:focus ~ #fd3,#pt4:focus ~ #fd4,#pt5:focus ~ #fd5,#pt6:focus ~ #fd6,#pt7:focus ~ #fd7,#pt8:focus ~ #fd8{position:fixed; z-index:200; width:100vw; height:56.25vw; left:0; top:0;}
--></style>

Cadre du montage en 60% de la largeur de l'écran de lecture.

Boutons de class="pt", positionnés individuellement.

Les images toutes positionnées et animées de la même façon. Adresses en bleu.

Le message de commande.