Coincer la bulle

A la demande de Noisette, le code d'un article publié sous le titre de "Coincer la bulle".

<div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/s-ZUAHqn1q34JpGDA-cSIxyJ1b0.jpg'); background-size: cover;">
<p id="n1">&nbsp;</p>
<p id="n2">&nbsp;</p>
<p id="n3">&nbsp;</p>
<p id="n4">&nbsp;</p>
<p id="n5">&nbsp;</p>
<p id="n6">&nbsp;</p>
<p id="n7">&nbsp;</p>
<p id="noi1" class="noi">&nbsp;</p>
<p id="noi2" class="noi">&nbsp;</p>
<p id="noi3" class="noi">&nbsp;</p>
<p id="noi4" class="noi">&nbsp;</p>
<p id="noi5" class="noi">&nbsp;</p>
<p id="noi6" class="noi">&nbsp;</p>
<p id="noi7" class="noi">&nbsp;</p>
</div>
<style><!--
#n1{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(2vw,15vw); }
#n2{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(10vw,20vw);}
#n3{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(18vw,15vw);}
#n4{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(26vw,20vw);}
#n5{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(34vw,15vw);}
#n6{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(42vw,20vw);}
#n7{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%; transform:translate(50vw,15vw);}
.noi{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; box-sizing:border-box; box-shadow:inset 0.5vh 0.5vh 0.8vh white, inset -0.5vh -0.5vh 0.8vh black; border:0.4vh solid white; transition:all 1s linear;}
#noi1{transform:translate(2vw,15vw) rotatey(180deg); background:url('http://ekladata.com/2a9u_ZgST5NAglTDkrNlsZbFLus.jpg'); background-size:cover;}
#noi2{transform:translate(10vw,20vw) rotatey(180deg); background:url('http://ekladata.com/HyBeerTOmSbMZarRfEOXUBvO_uc.jpg'); background-size:cover;}
#noi3{transform:translate(18vw,15vw) rotatey(180deg); background:url('http://ekladata.com/YT1JwTox4rHTNaXR8FHjzJXCq28.jpg'); background-size:cover;}
#noi4{transform:translate(26vw,20vw) rotatey(180deg); background:url('http://ekladata.com/UTsE3dWOSFzXtTbtVHaVl8JhSoY.jpg'); background-size:cover;}
#noi5{transform:translate(34vw,15vw) rotatey(180deg); background:url('http://ekladata.com/CrqMeC-gFuaB1jPlVa1Slv_PF0U.jpg'); background-size:cover;}
#noi6{transform:translate(42vw,20vw) rotatey(180deg); background:url('http://ekladata.com/9hkXc1lwghAha143C8fVqEbxbAQ.jpg'); background-size:cover;}
#noi7{transform:translate(50vw,15vw) rotatey(180deg); background:url('http://ekladata.com/WcHNJCKNRuw6_a3IAoPN2onCvbQ.jpg'); background-size:cover;}
#n1:hover ~ #noi1,#n2:hover ~ #noi2,#n3:hover ~ #noi3,#n4:hover ~ #noi4,#n5:hover ~ #noi5,#n6:hover ~ #noi6,#n7:hover ~ #noi7{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(0deg); border:none; border-radius:0%;}
--></style>