Plein Ecran 17

Sur le même principe, nous pouvons varier les présentations; un exemple:

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; background: url('http://ekladata.com/AKkTjPVAJqcvRghEUl9rLy6Ybio.jpg'); background-size: cover; text-align: left;"><input id="sol1" class="sol" type="text" /> <input id="sol2" class="sol" type="text" /> <input id="sol3" class="sol" type="text" /> <input id="sol4" class="sol" type="text" /> <input id="sol5" class="sol" type="text" /> <input id="sol6" class="sol" type="text" /> <input id="sol7" class="sol" type="text" /> <input id="sol8" class="sol" type="text" />
<p id="agr1" class="agr">&nbsp;</p>
<p id="agr2" class="agr">&nbsp;</p>
<p id="agr3" class="agr">&nbsp;</p>
<p id="agr4" class="agr">&nbsp;</p>
<p id="agr5" class="agr">&nbsp;</p>
<p id="agr6" class="agr">&nbsp;</p>
<p id="agr7" class="agr">&nbsp;</p>
<p id="agr8" class="agr">&nbsp;</p>
</div>
<style><!--
.sol{position:absolute; z-index:5; width:5vw; height:5vw; background:transparent; border:none;}
#sol1{transform:translate(2vw,5vw);}
#sol2{transform:translate(2vw,12vw);}
#sol3{transform:translate(2vw,19vw);}
#sol4{transform:translate(2vw,26vw);}
#sol5{transform:translate(54vw,5vw);}
#sol6{transform:translate(54vw,12vw);}
#sol7{transform:translate(54vw,19vw);}
#sol8{transform:translate(54vw,26vw);}
.agr{position:absolute; z-index:1;width:5vw; height:5vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#agr1{background:url('http://ekladata.com/-3B1iUkA-PatehPlVI7rW5dPOHs.jpg'); background-size:cover; transform:translate(2vw,5vw);}
#agr2{background:url('http://ekladata.com/p4SuMlj_z9WSSOgxhGZ0d0jevS0.jpg'); background-size:cover; transform:translate(2vw,12vw);}
#agr3{background:url('http://ekladata.com/SnJvAlfzRIH-R-hN6kLkS5zzF-E.jpg'); background-size:cover; transform:translate(2vw,19vw);}
#agr4{background:url('http://ekladata.com/6ZWdIVmWzxEqNtEcGkLyQRGaaKQ.jpg'); background-size:cover; transform:translate(2vw,26vw);}
#agr5{background:url('http://ekladata.com/ZRUSBRc4U69qKw2s-F94ypKTu_s.jpg'); background-size:cover; transform:translate(54vw,5vw);}
#agr6{background:url('http://ekladata.com/CJat9HiyLW2owI2DD0oCZAta4RM.jpg'); background-size:cover; transform:translate(54vw,12vw);}
#agr7{background:url('http://ekladata.com/-Qwfa9ibTnpgoTHlgACWI1Zrdo0.jpg'); background-size:cover; transform:translate(54vw,19vw);}
#agr8{background:url('http://ekladata.com/S83rWgyJKjM2Hfqz4WyjCBvNMLs.jpg'); background-size:cover; transform:translate(54vw,26vw);}
#sol1:focus ~ #agr1,#sol2:focus ~ #agr2,#sol3:focus ~ #agr3,#sol4:focus ~ #agr4,#sol5:focus ~ #agr5,#sol6:focus ~ #agr6,#sol7:focus ~ #agr7,#sol8:focus ~ #agr8{z-index:100; width:100vw; height:56.25vw; left:0; transform: translate(0vw,0vw); border:none; box-shadow:none; border-radius:0%;}
--></style>