Exemple 32

6+1 images au ratio 16/9, redimensionnées par le code en 1152x648px.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/Bs5klbpLEYeeos8baFVENyXz798@1152x648.jpg'); background-size: cover;">
<p id="sous">&nbsp;</p>
<p id="sur1" class="sur">&nbsp;</p>
<p id="sur2" class="sur">&nbsp;</p>
<p id="sur3" class="sur">&nbsp;</p>
<p id="sur4" class="sur">&nbsp;</p>
<p id="sur5" class="sur">&nbsp;</p>
<p id="sur6" class="sur">&nbsp;</p>
<p id="vig1" class="vig">&nbsp;</p>
<p id="vig2" class="vig">&nbsp;</p>
<p id="vig3" class="vig">&nbsp;</p>
<p id="vig4" class="vig">&nbsp;</p>
<p id="vig5" class="vig">&nbsp;</p>
<p id="vig6" class="vig">&nbsp;</p>
</div>
<style><!--
#sous{position:absolute; z-index:1; width:4vw; height:33.75vw; background:rgba(0,0,0,0.3); transform:translate(56vw,0vw);}
.sur{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; box-shadow:inset -0.3vh -0.3vh 0.6vh white, inset 0.3vh 0.3vh 0.6vh black; background:coral;}
#sur1{transform:translate(57vw,2vw);}
#sur2{transform:translate(57vw,5vw);}
#sur3{transform:translate(57vw,8vw);}
#sur4{transform:translate(57vw,11vw);}
#sur5{transform:translate(57vw,14vw);}
#sur6{transform:translate(57vw,17vw);}
#sur1:hover{background:lime;}
.vig{position:absolute; z-index:1; width:10vw; height:0vw; background-size:cover; transform:translate(25vw,16.75vw) rotatex(270deg); transition:all 1s linear;}
#vig1{background:url('http://ekladata.com/oqdcgpcsaz28rVgbGOZX7jCrWaw@1152x648.jpg');}
#vig2{background:url('http://ekladata.com/BCU4pAiTQwp1xqmPlggPfGnbpas@1152x648.jpg');}
#vig3{background:url('http://ekladata.com/LCAvvGeZBxM6xShtTYTsGNhZGmc@1152x648.jpg');}
#vig4{background:url('http://ekladata.com/wyqF-97zWhDSwGNRQU8mCbutxOs@1152x648.jpg');}
#vig5{background:url('http://ekladata.com/3GMeCMkrcVaRuXJRzm1K7QjvYCk@1152x648.jpg');}
#vig6{background:url('http://ekladata.com/ZPzGr3LWwq9_4xju5bo0LUc2QAw@1152x648.jpg');}
#sur1:hover ~ #vig1,#sur2:hover ~ #vig2,#sur3:hover ~ #vig3,#sur4:hover ~ #vig4,#sur5:hover ~ #vig5,#sur6:hover ~ #vig6{width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatex(0deg);}
--></style>