Exemple 34

Une variante en ovale plutôt qu'en rond.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="sv">Survol aur&eacute;oles.</p>
<p id="mm1" class="mm">&nbsp;</p>
<p id="mm2" class="mm">&nbsp;</p>
<p id="mm3" class="mm">&nbsp;</p>
<p id="mm4" class="mm">&nbsp;</p>
<p id="mm5" class="mm">&nbsp;</p>
<p id="mm6" class="mm">&nbsp;</p>
<p id="rd1" class="rd">&nbsp;</p>
<p id="rd2" class="rd">&nbsp;</p>
<p id="rd3" class="rd">&nbsp;</p>
<p id="rd4" class="rd">&nbsp;</p>
<p id="rd5" class="rd">&nbsp;</p>
<p id="rd6" class="rd">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; z-index:1; width:20vw; font-size:1.2vw; color:coral; text-shadow:0.1vh 0.1vh black; transform:translate(12vw,0vw);}
.mm{position:absolute; z-index:1; width:15vw; height:10vw; border-radius:50%; background-size:60vw 33.75vw; box-shadow:inset -0.4vh -0.4vh 0.8vh white, inset 0.4vh 0.4vh 0.8vh black; transition:all 1s linear;}
#mm1{background:url('http://ekladata.com/8M0_BST2VXLE7sEOlP6dQ6UUK3U@1152x648.jpg'); background-position:-3vw -3vw; transform:translate(3vw,3vw);}
#mm2{background:url('http://ekladata.com/OXQE3ip3W-R6tE76xxzwTjVoEDQ@1152x648.jpg'); background-position:-23vw -3vw; transform:translate(23vw,3vw);}
#mm3{background:url('http://ekladata.com/S0kiHlsXlcMm9ZxpsnrC8keGtOQ@1152x648.jpg'); background-position:-43vw -3vw; transform:translate(43vw,3vw);}
#mm4{background:url('http://ekladata.com/5Y-HfUtzZIcHb9djA7iuopP1hVU@1152x648.jpg'); background-position:-3vw -16vw; transform:translate(3vw,16vw);}
#mm5{background:url('http://ekladata.com/nyFtwW69hqLhr-HrwAk1NZRqaN8@1152x648.jpg'); background-position:-23vw -16vw; transform:translate(23vw,16vw);}
#mm6{background:url('http://ekladata.com/7XnD-1hRNWgu8LE4NoSMtGpFrEs@1152x648.jpg'); background-position:-43vw -16vw; transform:translate(43vw,16vw);}
.rd{position:absolute; z-index:2; width:9vw; height:7vw; border-radius:50%; background:#d9d9d9; transition:all 1s linear;}
#rd1{transform:translate(6vw,4.5vw);}
#rd2{transform:translate(26vw,4.5vw);}
#rd3{transform:translate(46vw,4.5vw);}
#rd4{transform:translate(6vw,17.5vw);}
#rd5{transform:translate(26vw,17.5vw);}
#rd6{transform:translate(46vw,17.5vw);}
#mm1:hover,#mm2:hover,#mm3:hover,#mm4:hover,#mm5:hover,#mm6:hover{z-index:10; width:60vw; height:33.75vw; border-radius:0%; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#mm1:hover ~ #rd1,#mm2:hover ~ #rd2,#mm3:hover ~ #rd3, #mm4:hover ~ #rd4,#mm5:hover ~ #rd5,#mm6:hover ~ #rd6{width:0vw; height:0vw;}
--></style>