Exemple 172

Toujours un montage de 1100px par 619px, ratio images 16/9.

<div style="width: 1100px; height: 619px; margin: 2px auto; border: 2px solid black; background: url('http://ekladata.com/_sUDge_1UlULo42UTf2GJyfJpKo.jpg'); background-size: cover;">
<p id="mtg0">Clic maintenu</p>
<p id="mtg1" class="mtg">&nbsp;</p>
<p id="mtg2" class="mtg">&nbsp;</p>
<p id="mtg3" class="mtg">&nbsp;</p>
<p id="mtg4" class="mtg">&nbsp;</p>
<p id="mtg5" class="mtg">&nbsp;</p>
<p id="mtg6" class="mtg">&nbsp;</p>
</div>

<style><!--
#mtg0{position:absolute; z-index:1; width:200px; font-size:30px; color:white; text-shadow:1px 1px black; background:rgba(0,0,0,0.5); transform:translate(400px,420px);}
.mtg{position:absolute; z-index:1; width:160px; height:90px; border:3px solid white; box-shadow:4px 4px 6px black; filter:hue-rotate(90deg); transition:all 1s linear;}
#mtg1{background:url('http://ekladata.com/WOR1ZMJgCKWkI6jeZtIoIVGlAI0.jpg'); background-size:cover; transform:translate(15px,500px) rotatey(180deg);}
#mtg2{background:url('http://ekladata.com/z44hlZ2tXqz772DbMPkf0hEBf8Y.jpg'); background-size:cover; transform:translate(190px,500px) rotatey(180deg);}
#mtg3{background:url('http://ekladata.com/MT_o3FT1ESPbP978b6doGo6Pno0.jpg'); background-size:cover; transform:translate(365px,500px) rotatey(180deg);}
#mtg4{background:url('http://ekladata.com/_fpdMqL-q1R8n7crURav79HGl1o.jpg'); background-size:cover; transform:translate(540px,500px) rotatey(180deg);}
#mtg5{background:url('http://ekladata.com/qbCLwTJjjo-GqX919JFR2DAfy7k.jpg'); background-size:cover; transform:translate(715px,500px) rotatey(180deg);}
#mtg6{background:url('http://ekladata.com/UisEPyy4x6VCk000tI_nw7GYN_I.jpg'); background-size:cover; transform:translate(890px,500px) rotatey(180deg);}
#mtg1:active,#mtg2:active,#mtg3:active,#mtg4:active,#mtg5:active,#mtg6:active{z-index:5; box-sizing:border-box; width:1100px; height:619px;filter:hue-rotate(0deg); transform:translate(0px,0px) rotatey(0deg);}
--></style>