Plein Ecran 18

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; background: url('http://ekladata.com/0ENOgXZqC9bdBebGQGb6QqyaiYE/img694.jpg'); margin: 1vh auto; text-align: left;"><input id="lien1" class="lien" type="text" /> <input id="lien2" class="lien" type="text" /> <input id="lien3" class="lien" type="text" /> <input id="lien4" class="lien" type="text" /> <input id="lien5" class="lien" type="text" /> <input id="lien6" class="lien" type="text" /> <input id="lien7" class="lien" type="text" /> <input id="lien8" class="lien" type="text" />
<p id="cc">Clic</p>
<p id="sah1" class="sah">&nbsp;</p>
<p id="sah2" class="sah">&nbsp;</p>
<p id="sah3" class="sah">&nbsp;</p>
<p id="sah4" class="sah">&nbsp;</p>
<p id="sah5" class="sah">&nbsp;</p>
<p id="sah6" class="sah">&nbsp;</p>
<p id="sah7" class="sah">&nbsp;</p>
<p id="sah8" class="sah">&nbsp;</p>
</div>
<style><!--
.lien{position:absolute; z-index:1; width:10vw; height:10vw; border:0.4vh solid white; box-shadow:0.4vh -0.4vh 0.6vh black;}
#lien1{transform:translate(5vw,5vw) rotate(45deg); background:url('http://ekladata.com/rarXXGxWPNDJ8whRyAhjbsBO5GM@200x200.jpg'); }
#lien2{transform:translate(5vw,18vw) rotate(45deg); background:url('http://ekladata.com/RLfeLnn2MkxK79HhfzYic8RnnzY@200x200.jpg');}
#lien3{transform:translate(18vw,5vw) rotate(45deg); background:url('http://ekladata.com/4pyo2mzyW4mwLuB3mBaVfpz5104@200x200.jpg');}
#lien4{transform:translate(18vw,18vw) rotate(45deg); background:url('http://ekladata.com/WIs7QymR4EXk47kaVlzg_4gyzww@200x200.jpg');}
#lien5{transform:translate(31vw,5vw) rotate(45deg); background:url('http://ekladata.com/_2zN_C2Ge5We9wV5_LM9XJay6bs@200x200.jpg');}
#lien6{transform:translate(31vw,18vw) rotate(45deg); background:url('http://ekladata.com/6hfNVVrFKxo9nvmaSQTFBtg9txQ@200x200.jpg');}
#lien7{transform:translate(44vw,5vw) rotate(45deg); background:url('http://ekladata.com/Q1notsr9QKJteA5An-Mq_Qo69ds@200x200.jpg');}
#lien8{transform:translate(44vw,18vw) rotate(45deg); background:url('http://ekladata.com/Yauw3oTnhYeC-YNksJGxi4hbD2Y@200x200.jpg');}
#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(25vw,0vw);}
.sah{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;}
#sah1{background:url('http://ekladata.com/rarXXGxWPNDJ8whRyAhjbsBO5GM.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah2{background:url('http://ekladata.com/RLfeLnn2MkxK79HhfzYic8RnnzY.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah3{background:url('http://ekladata.com/4pyo2mzyW4mwLuB3mBaVfpz5104.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah4{background:url('http://ekladata.com/WIs7QymR4EXk47kaVlzg_4gyzww.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah5{background:url('http://ekladata.com/_2zN_C2Ge5We9wV5_LM9XJay6bs.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah6{background:url('http://ekladata.com/6hfNVVrFKxo9nvmaSQTFBtg9txQ.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah7{background:url('http://ekladata.com/Q1notsr9QKJteA5An-Mq_Qo69ds.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#sah8{background:url('http://ekladata.com/Yauw3oTnhYeC-YNksJGxi4hbD2Y.jpg'); background-size:100vw 56.25vw; background-position:50% 50%;}
#lien1:focus ~ #sah1,#lien2:focus ~ #sah2,#lien3:focus ~ #sah3,#lien4:focus ~ #sah4,#lien5:focus ~ #sah5,#lien6:focus ~ #sah6,#lien7:focus ~ #sah7,#lien8:focus ~ #sah8{width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw); filter:grayscale(0); -webkit-filter:grayscale(0);}
--></style>