ArtD.3.4.21

1+8 images au ratio 16/9; la taille du montage est adaptable.

Clic

<div style="width: 80vw; height: 45vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/nH5GVGEqb6ucDH_Cw3SdPJuJI-o.jpg'); background-size: cover;"><input id="fl1" class="fl" type="button" />
<input id="fl2" class="fl" type="button" />
<input id="fl3" class="fl" type="button" />
<input id="fl4" class="fl" type="button" />
<input id="fl5" class="fl" type="button" />
<input id="fl6" class="fl" type="button" />
<input id="fl7" class="fl" type="button" />
<input id="fl8" class="fl" type="button" />
<p id="fg">Clic</p>
<img id="car1" class="car" src="http://ekladata.com/5MJUfbGIiOnkBSrdQ8V9I2mV1v8.jpg" alt="" />
<img id="car2" class="car" src="http://ekladata.com/Z6ILRS-4znJKmd-zwll3CtpukrE.jpg" alt="" />
<img id="car3" class="car" src="http://ekladata.com/i0Wv0HCnBqVgQ50z77NW-q8i_RM.jpg" alt="" />
<img id="car4" class="car" src="http://ekladata.com/Y2tJne_LgWTqhTWPGhQFe-kXZ0I.jpg" alt="" />
<img id="car5" class="car" src="http://ekladata.com/XlmKfzwm8fQDeQc4Lo27oVmTjWQ.jpg" alt="" />
<img id="car6" class="car" src="http://ekladata.com/0BYYJmSDRLWGmWPYVkP1enKdE8I.jpg" alt="" />
<img id="car7" class="car" src="http://ekladata.com/jHG9W7ifFAw8DzyMDdPUAnRnoZg.jpg" alt="" />
<img id="car8" class="car" src="http://ekladata.com/juEgFm4AN5cO6tp89vZzYAthNso.jpg" alt="" />
</div>

<style><!--
.fl{position:absolute; z-index:10; font-size:2vw; width:1vw; height:1.5vw; background:lime!important; border-radius:50%;}
.fl:focus{background:red!important;}
#fl1{transform:translate(77vw,5vw);}
#fl2{transform:translate(77vw,10vw);}
#fl3{transform:translate(77vw,15vw);}
#fl4{transform:translate(77vw,20vw);}
#fl5{transform:translate(77vw,25vw);}
#fl6{transform:translate(77vw,30vw);}
#fl7{transform:translate(77vw,35vw);}
#fl8{transform:translate(77vw,40vw);}
#fg{position:absolute; z-index:1; width:4vw; height:45vw; background:rgba(0,0,0,0.5); transform:translate(76vw,0vw); text-align:center; font-size:1.5vw; color:white;}
.car{position:absolute; z-index:1; width:80vw; height:45vw; transition:all 1s linear;}
#car1,#car3,#car5,#car7{transform-origin:center left; transform:translate(0vw,0vw) perspective(20vw) rotatey(90deg);}
#car2,#car4,#car6,#car8{transform-origin:center right; transform:translate(0vw,0vw) perspective(20vw) rotatey(-90deg);}
#fl1:focus ~ #car1,#fl2:focus ~ #car2,#fl3:focus ~ #car3,#fl4:focus ~ #car4,#fl5:focus ~ #car5,#fl6:focus ~ #car6,#fl7:focus ~ #car7,#fl8:focus ~ #car8{z-index:5; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg);}

--></style>