Votre pourcentage /4

Ajoutons un arrondi au montage avec survol des boutons et transition par opacité.

Nous avons vu le changement de taille sur les pages précédentes: à vous de jouer !

<div style="width: 80vw; height: 92vh; margin: 2vh auto;">
<p id="ac1" class="ac">&nbsp;</p>
<p id="ac2" class="ac">&nbsp;</p>
<p id="ac3" class="ac">&nbsp;</p>
<p id="ac4" class="ac">&nbsp;</p>
<p id="ac5" class="ac">&nbsp;</p>
<p id="ac6" class="ac">&nbsp;</p>
<p id="ah0">&nbsp;</p>
<p id="ah1" class="ah">&nbsp;</p>
<p id="ah2" class="ah">&nbsp;</p>
<p id="ah3" class="ah">&nbsp;</p>
<p id="ah4" class="ah">&nbsp;</p>
<p id="ah5" class="ah">&nbsp;</p>
<p id="ah6" class="ah">&nbsp;</p>
</div>

<style><!--
.ac{position:absolute; z-index:10; width:3vw; height:6vh; border-radius:50%; border:0.1vh solid white; background:linear-gradient(to top,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.7) 100%);}
#ac1{transform:translate(60vw,0vh);}
#ac2{transform:translate(63.5vw,2.5vh);}
#ac3{transform:translate(67vw,5.7vh);}
#ac4{transform:translate(70.3vw,9.7vh);}
#ac5{transform:translate(73.5vw,14.5vh);}
#ac6{transform:translate(76.5vw,20vh);}

.ah{position:absolute; z-index:1;width:80vw; height:92vh; border-radius:50%; transform:translate(0vw,0vh); transition:all 1s linear; opacity:0;}
#ah0{position:absolute; z-index:1;width:80vw; height:92vh; border-radius:50%;transform:translate(0vw,0vh); background:url('http://ekladata.com/CsXvX2gvuZeXoNctgtY6CTE3LmU.jpg'); background-size:80vw 92vh;}
#ah1{background:url('http://ekladata.com/S89puMNTlNU8lxZ0hKCsKSkCkxA.jpg'); background-size:80vw 92vh;}
#ah2{background:url('http://ekladata.com/Aaf62Ljb1TG-aNuO9spclybqBI4.jpg'); background-size:80vw 92vh;}
#ah3{background:url('http://ekladata.com/ldaq2F3GEHn6rhRTf2YWT3llXG0.jpg'); background-size:80vw 92vh;}
#ah4{background:url('http://ekladata.com/tM1ekeJ8nPtPWQo40bU_bzR_Ejg.jpg'); background-size:80vw 92vh;}
#ah5{background:url('http://ekladata.com/zDIUY1tRhMDZQUGtUTnfAk9GreM.jpg'); background-size:80vw 92vh;}
#ah6{background:url('http://ekladata.com/MeJ_RISIepg1yMnED1kzUibDaHU.jpg'); background-size:80vw 92vh;}

#ac1:hover ~ #ah1,#ac2:hover ~ #ah2,#ac3:hover ~ #ah3,#ac4:hover ~ #ah4,#ac5:hover ~ #ah5,#ac6:hover ~ #ah6{opacity:1;}
--></style>

Le changement de taille, le positionnement des boutons, les arrondis.