Plein Ecran 18

On me demande si on peut changer les lettres par des noms: bien sûr !

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; text-align: left;"><input id="gel0" class="gel" type="text" value="Clic lettres" /> <input id="gel1" class="gel" type="text" value="Chat 1" /> <input id="gel2" class="gel" type="text" value="Chat 2" /> <input id="gel3" class="gel" type="text" value="Chat 3" /> <input id="gel4" class="gel" type="text" value="Chat 4" /> <input id="gel5" class="gel" type="text" value="Chat 5" /> <input id="gel6" class="gel" type="text" value="Chat 6" /> <input id="gel7" class="gel" type="text" value="Chat 7" /> <input id="gel8" class="gel" type="text" value="Chat 8" /> <img id="pgiv1" src="http://ekladata.com/ZvQTW9Fvl7plX8A38UgXP7E15NY@1152x648.jpg" alt="" /> <img id="giv1" class="giv" src="http://ekladata.com/r1wucfAzv-zm1-X8kcFr9kRgB8U.jpg" alt="" /> <img id="giv2" class="giv" src="http://ekladata.com/Kj6GGon8rKxbQW3QSox1WmVMXLg.jpg" alt="" /> <img id="giv3" class="giv" src="http://ekladata.com/_mh2Oqpb7DuvaQqa_6Hbn75NgKk.jpg" alt="" /> <img id="giv4" class="giv" src="http://ekladata.com/qFBL4Hw6o9nWEsJuLHGHUYKDe00.jpg" alt="" /> <img id="giv5" class="giv" src="http://ekladata.com/gK7Ap2Ry4XE0wFCStCyO4mP18eU.jpg" alt="" /> <img id="giv6" class="giv" src="http://ekladata.com/aNhAw4mYlZrbZhc3Salj2VU4rMw.jpg" alt="" /> <img id="giv7" class="giv" src="http://ekladata.com/oHeOh91WmlhYzqqQ8B9PNeJ7xvY.jpg" alt="" /> <img id="giv8" class="giv" src="http://ekladata.com/-z9diUtsqzNR9L0fWuxuJZNNul8.jpg" alt="" /></div>
<style><!--
.gel{position:absolute; z-index:10; width:5vw;  color:white!important; text-shadow:0.1vh 0.1vh black;background:transparent; text-align:center; line-height:2vw; font-size:1.4vw;}
#gel0{transform:translate(49vw,0vw); width:10vw;}
#gel1{transform:translate(54vw,3vw);}
#gel2{transform:translate(54vw,6vw);}
#gel3{transform:translate(54vw,9vw);}
#gel4{transform:translate(54vw,12vw);}
#gel5{transform:translate(54vw,15vw);}
#gel6{transform:translate(54vw,18vw);}
#gel7{transform:translate(54vw,21vw);}
#gel8{transform:translate(54vw,24vw);}
#pgiv1{position:absolute; z-index:1; width:60vw; height:33.75vw;}
.giv{position:absolute; z-index:100; width:0vw; height:0vw; background-position:50% 50%; transition:all 1s linear; left:50vw; }
#gel1:focus ~ #giv1,#gel2:focus ~ #giv2,#gel3:focus ~ #giv3,#gel4:focus ~ #giv4,#gel5:focus ~ #giv5,#gel6:focus ~ #giv6,#gel7:focus ~ #giv7,#gel8:focus ~ #giv8{width:100vw; height:56.25vw; background-position:0% 0%; left:0;}
--></style>