Plein écran

Le montage doit être aligné sur le bord gauche de votre page; si vous avez un menu à gauche, le centrage ne sera pas bon: il vous faudra connaître la largeur du menu pour décaler l'agrandissement au dessus.

Si vous avez paramétré votre page avec le centrage du texte, comme moi, il faut ajouter: text-align: left;

La largeur du montage est de 60% de l'écran de lecture.

Clic maintenu sur la vignette: si, en même temps vous déplacez la vignette , l'image restera stable sans clic maintenu. Clic dessus pour réduire.

<div style="width: 60vw; height: 5.5vw; text-align: left; ">
<img id="cor1" class="cor" src="http://ekladata.com/EH1shH43dvnRzWR0sG04OlcLqvQ.jpg" alt="" />
<img id="cor2" class="cor" src="http://ekladata.com/BmTAXGs08ysAV8BkQ1iyxczhRwo.jpg" alt="" />
<img id="cor3" class="cor" src="http://ekladata.com/7mPD8a983cwavI587RHaLFkj34s.jpg" alt="" />
<img id="cor4" class="cor" src="http://ekladata.com/kE431rc6YyvYpthAobuUCHtCAP4.jpg" alt="" />
<img id="cor5" class="cor" src="http://ekladata.com/9YHZTsUkoYhTl3n3YMpLbe9SWjI.jpg" alt="" />
<img id="cor6" class="cor" src="http://ekladata.com/HGrAOw6PBq1B4yA2QJOg3zjFhBU.jpg" alt="" />
</div>

<style><!--
.cor{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.5vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#cor1{transform:translate(0vw,0vw);}
#cor2{transform:translate(10vw,0vw);}
#cor3{transform:translate(20vw,0vw);}
#cor4{transform:translate(30vw,0vw);}
#cor5{transform:translate(40vw,0vw);}
#cor6{transform:translate(50vw,0vw);}
#cor1:active,#cor2:active,#cor3:active,#cor4:active,#cor5:active,#cor6:active{z-index:5; width:100vw; height:100vh;transform:translate(0vw,0vw);}
--></style>