Clic et survol en adaptatif

Vous retrouvez un montage publié, avec ici une version en mode adaptatif.
Vous pouvez placer les adresses de vos images à la place des miennes, quelles que soient leurs dimensions mais de préférence au rapport 16/9, afin qu'elles ne soient pas déformées.
7 images ici mais on peut en modifier le nombre.

Afin d'adapter le montage à l'écran de lecture, il faut adopter les unités adaptatives: vw et vh ce qui n'est pas encore dans mes réflexes !

Image de fond en texture modifiable en image ou même sans cadre et fond: au choix !

<div style="width: 80vw; height: 86vh; border: 1px solid black; background: url('http://ekladata.com/EC7ehnSwYEUC3G8QzJvO4qs5IeI/dogclay.jpg'); margin: 0px auto;"><input id="b1" type="text" />
<p id="m0">Cliquez sur le montage pour d&eacute;placer les vignettes.<br />Puis survolez chaque vignette pour l'agrandir.<br />Retour par un clic hors montage.</p>
<p id="m1">&nbsp;</p>
<p id="m2">&nbsp;</p>
<p id="m3">&nbsp;</p>
<p id="m4">&nbsp;</p>
<p id="m5">&nbsp;</p>
<p id="m6">&nbsp;</p>
<p id="m7">&nbsp;</p>
</div>

<style><!--
#b1{position:absolute; z-index:10; width:80vw; height:86vh; background:transparent; border:none;}
#m0{position:absolute;z-index:1; width:60vw; text-align:center; font-size:3.5vh; text-shadow:1px 1px black; color:yellow; transform:translate(20%,0%);}
#m1{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(5vw,10vh) rotate(-15deg); background:url('http://ekladata.com/pUPrzy732n_CLeBQdVsAgsnoYIg.jpg'); background-size:cover; transition:all 1s linear;}
#m2{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(10vw,20vh); background:url('http://ekladata.com/wuJhq8rvDQqtQJYcb31OWj1HNJY.jpg'); background-size:cover; transition:all 1s linear;}
#m3{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(20vw,30vh)rotate(20deg); background:url('http://ekladata.com/OTSEz0y8Qo-5RcBshB3zcIw_e34.jpg'); background-size:cover; transition:all 1s linear;}
#m4{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(15vw,50vh) rotate(-10deg); background:url('http://ekladata.com/YSg7ghrcBEU5LW5tAlN4ckDRBAc.jpg'); background-size:cover; transition:all 1s linear;}
#m5{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(40vw,20vh) rotate(5deg) ; background:url('http://ekladata.com/sbLfCWQWPH2e3ltG-WZE0nuE3S4.jpg'); background-size:cover; transition:all 1s linear;}
#m6{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(50vw,35vh) rotate(10deg); background:url('http://ekladata.com/TzdKIIA86QCLIePvqBG4N3uM69s.jpg'); background-size:cover; transition:all 1s linear;}
#m7{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(55vw,50vh)rotate(-20deg) ; background:url('http://ekladata.com/dcxP7cnpWijzOLlLIGvMZm9qpt4.jpg'); background-size:cover; transition:all 1s linear;}

#b1:focus{width:0px;height:0px;}
#b1:focus ~ #m1{transform:translate(5vw,10vh); }
#b1:focus ~ #m2{transform:translate(22vw,20vh);}
#b1:focus ~ #m3{transform:translate(42vw,20vh);}
#b1:focus ~ #m4{transform:translate(60vw,10vh);}
#b1:focus ~ #m5{transform:translate(10vw,55vh);}
#b1:focus ~ #m6{transform:translate(30vw,55vh);}
#b1:focus ~ #m7{transform:translate(50vw,55vh);}
#m1:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-10vh 0 0 -5vw;}
#m2:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-20vh 0 0 -22vw;}
#m3:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-20vh 0 0 -42vw;}
#m4:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-10vh 0 0 -60vw;}
#m5:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-55vh 0 0 -10vw;}
#m6:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-55vh 0 0 -30vw;}
#m7:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-55vh 0 0 -50vw;}
--></style>