Flemme 1

...

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; background: url('http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg'); margin: 1vh auto; text-align: left;"><input id="lien1a" class="liena" type="text" /> <input id="lien2a" class="liena" type="text" /> <input id="lien3a" class="liena" type="text" /> <input id="lien4a" class="liena" type="text" /> <input id="lien5a" class="liena" type="text" /> <input id="lien6a" class="liena" type="text" /> <input id="lien7a" class="liena" type="text" /> <input id="lien8a" class="liena" type="text" />
<p id="cc">Clic</p>
<p id="sah1a" class="saha">&nbsp;</p>
<p id="sah2a" class="saha">&nbsp;</p>
<p id="sah3a" class="saha">&nbsp;</p>
<p id="sah4a" class="saha">&nbsp;</p>
<p id="sah5a" class="saha">&nbsp;</p>
<p id="sah6a" class="saha">&nbsp;</p>
<p id="sah7a" class="saha">&nbsp;</p>
<p id="sah8a" class="saha">&nbsp;</p>
</div>
<style><!--
.liena{position:absolute; z-index:1; width:15vw; height:15vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;}
#lien1a{transform:translate(5vw,1vw); background:url('http://ekladata.com/CNF4ZjzczMkvIjTHSqjMVneNG4w@230x230.jpg');background-size:cover;}
#lien2a{transform:translate(5vw,18vw); background:url('http://ekladata.com/BqKnvIdTtaD3IN_Rc7KYpFviuQ8@230x230.jpg');background-size:cover;}
#lien3a{transform:translate(14vw,10.5vw); background:url('http://ekladata.com/mUAk-i18oX-FMtcuZ4amJsIggq4@230x230.jpg');background-size:cover;}
#lien4a{transform:translate(23vw,1vw); background:url('http://ekladata.com/GwggK9dbwtvpACxscm_vqhZbVqI@230x230.jpg');background-size:cover;}
#lien5a{transform:translate(23vw,18vw); background:url('http://ekladata.com/63KjdzQBX6LtDWI147XyOvVMFLI@230x230.jpg');background-size:cover;}
#lien6a{transform:translate(31vw,10.5vw); background:url('http://ekladata.com/CucIrUWnL4t94Jc7cKjjED8vNhM@230x230.jpg');background-size:cover;}
#lien7a{transform:translate(40vw,1vw); background:url('http://ekladata.com/siMUdEFg8vn7-dZa8mRE3Aersl0@230x230.jpg');background-size:cover;}
#lien8a{transform:translate(40vw,18vw); background:url('http://ekladata.com/Pnp3JG85qB5IQrxFEojNA6hwfeA@230x230.jpg'); background-size:cover;}
#cc{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:green; text-shadow:0.1vh 0.1vh brown; transform:translate(0vw,0vw);}
.saha{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; transform:translate(0vw,28vw); filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, left 1s linear 0s, filter 1s linear 1s;}
#sah1a{background:url('http://ekladata.com/CNF4ZjzczMkvIjTHSqjMVneNG4w.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah2a{background:url('http://ekladata.com/BqKnvIdTtaD3IN_Rc7KYpFviuQ8.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah3a{background:url('http://ekladata.com/mUAk-i18oX-FMtcuZ4amJsIggq4.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah4a{background:url('http://ekladata.com/GwggK9dbwtvpACxscm_vqhZbVqI.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah5a{background:url('http://ekladata.com/63KjdzQBX6LtDWI147XyOvVMFLI.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah6a{background:url('http://ekladata.com/CucIrUWnL4t94Jc7cKjjED8vNhM.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah7a{background:url('http://ekladata.com/siMUdEFg8vn7-dZa8mRE3Aersl0.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah8a{background:url('http://ekladata.com/Pnp3JG85qB5IQrxFEojNA6hwfeA.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#lien1a:focus ~ #sah1a,#lien2a:focus ~ #sah2a,#lien3a:focus ~ #sah3a,#lien4a:focus ~ #sah4a,#lien5a:focus ~ #sah5a,#lien6a:focus ~ #sah6a,#lien7a:focus ~ #sah7a,#lien8a:focus ~ #sah8a{width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw); filter:grayscale(0); -webkit-filter:grayscale(0);}
--></style>