Au clic

Code montage publié.

Clic sur chaque vignette pour l'afficher en taille moyenne, dans le centre du montage; son survol va l'agrandir à la taille du montage et un clic va remettre le montage en position de départ.

Une contrainte, tout de même, ne pas laisser son curseur sur le chemin de l'image animée car le survol intervient.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/kybhinYuuiJqH2YPkJH-VzJlaRY@1152x648.jpg'); background-size: 60vw 33.75vw;"><input id="st1" class="st" type="text" /><input id="st2" class="st" type="text" /><input id="st3" class="st" type="text" /><input id="st4" class="st" type="text" /><input id="st5" class="st" type="text" /><input id="st6" class="st" type="text" /><input id="st7" class="st" type="text" /> <img id="an1" class="an" src="http://ekladata.com/uSiUyGcy3l2KITWOsuGWHtItF-U.jpg" alt="" /> <img id="an2" class="an" src="http://ekladata.com/2ZbjBqD4yLFF5IrSWNNGamArcDo.jpg" alt="" /> <img id="an3" class="an" src="http://ekladata.com/QqE5h3M7D5vKmrOAlt2RjL7VIK4.jpg" alt="" /> <img id="an4" class="an" src="http://ekladata.com/LeTL87fi5xJifAqRWm0oLLGfPRk.jpg" alt="" /> <img id="an5" class="an" src="http://ekladata.com/wvvo6N5mYz4p7oeg2GXGhiRcauU.jpg" alt="" /> <img id="an6" class="an" src="http://ekladata.com/FVugvn66FRRCZPp5N97lWDnxvXY.jpg" alt="" /> <img id="an7" class="an" src="http://ekladata.com/zh0OxinCM4LRCoA8zh-yjelvurg.jpg" alt="" /></div>
<style><!--
.st{position:absolute; z-index:15; width:8vw; height:4.5vw; border:none; background:none;transition:all 1s linear;}
#st1{transform:translate(5vw,2vw);}
#st2{transform:translate(15vw,2vw);}
#st3{transform:translate(25vw,2vw);}
#st4{transform:translate(35vw,2vw);}
#st5{transform:translate(45vw,2vw);}
#st6{transform:translate(5vw,10vw);}
#st7{transform:translate(5vw,18vw);}

.an{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#an1{ transform:translate(5vw,2vw);}
#an2{ transform:translate(15vw,2vw);}
#an3{ transform:translate(25vw,2vw);}
#an4{ transform:translate(35vw,2vw);}
#an5{ transform:translate(45vw,2vw);}
#an6{ transform:translate(5vw,10vw);}
#an7{ transform:translate(5vw,18vw);}

#st1:focus,#st2:focus,#st3:focus,#st4:focus,#st5:focus,#st6:focus,#st7:focus{width:16vw; height:4.5vw; background:none; transform:translate(25vw,13vw);}
#st1:focus ~ #an1,#st2:focus ~ #an2,#st3:focus ~ #an3,#st4:focus ~ #an4,#st5:focus ~ #an5,#st6:focus ~ #an6,#st7:focus ~ #an7{z-index:20; width:16vw; height:9vw; transform:translate(25vw,13vw);}
#st1:focus ~ #an1:hover,#st2:focus ~ #an2:hover,#st3:focus ~ #an3:hover,#st4:focus ~ #an4:hover,#st5:focus ~ #an5:hover,#st6:focus ~ #an6:hover,#st7:focus ~ #an7:hover{z-index:20; width:60vw; height:33.75vw; border:none; box-shadow:none; transform:translate(0vw,0vw);}
--></style>