Plein Ecran 27

Le même avec un affichage en plein écran au clic.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;"><input id="part1" type="text" /> <input id="part2" type="text" /> <input id="part3" type="text" /> <input id="part4" type="text" /> <input id="part5" type="text" /> <input id="part6" type="text" />
<img id="plein1" class="plein" src="http://ekladata.com/BmnXygFQW4FO-_MDN8dy4tawjkA.jpg">
<img id="plein2" class="plein" src="http://ekladata.com/jRZz-useFIsjrQBXhj5TRZz0Jio.jpg">
<img id="plein3" class="plein" src="http://ekladata.com/B5UH5Gcwyfv9K17jm3c9YtUWrNg.jpg">
<img id="plein4" class="plein" src="http://ekladata.com/g2lgeyrO4Pk5JLLx0oPiK1Qvp_4.jpg">
<img id="plein5" class="plein" src="http://ekladata.com/jpxDKYa_jFRKgv8yt5_19NncIOE.jpg">
<img id="plein6" class="plein" src="http://ekladata.com/FkFwgUIPE-TSvyYfJxjPBSADeO4.jpg">
</div>
<style><!--
#part1{position:absolute; z-index:1; box-sizing:border-box; width:60vw; height:33.75vw; border:0.6vh solid white; background:url('http://ekladata.com/BmnXygFQW4FO-_MDN8dy4tawjkA@1152x648.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw);}
#part2{position:absolute; z-index:1; box-sizing:border-box; width:50vw; height:28.75vw; border:0.6vh solid white; background:url('http://ekladata.com/jRZz-useFIsjrQBXhj5TRZz0Jio@1152x648.jpg'); background-position:-5vw -2.5vw; transform:translate(5vw,2.5vw);}
#part3{position:absolute; z-index:1; box-sizing:border-box; width:40vw; height:23.75vw; border:0.6vh solid white; background:url('http://ekladata.com/B5UH5Gcwyfv9K17jm3c9YtUWrNg@1152x648.jpg'); background-position:-10vw -5vw; transform:translate(10vw,5vw);}
#part4{position:absolute; z-index:1; box-sizing:border-box; width:30vw; height:18.75vw; border:0.6vh solid white; background:url('http://ekladata.com/g2lgeyrO4Pk5JLLx0oPiK1Qvp_4@1152x648.jpg'); background-position:-15vw -7.5vw; transform:translate(15vw,7.5vw);}
#part5{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:13.75vw; border:0.6vh solid white; background:url('http://ekladata.com/jpxDKYa_jFRKgv8yt5_19NncIOE@1152x648.jpg'); background-position:-20vw -10vw; transform:translate(20vw,10vw);}
#part6{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:8.75vw; border:0.6vh solid white; background:url('http://ekladata.com/FkFwgUIPE-TSvyYfJxjPBSADeO4@1152x648.jpg'); background-position:-25vw -12.5vw; transform:translate(25vw,12.5vw);}
.plein{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; background-position:50vw 0vw; transition:all 1s linear;}

#part1:focus ~ #plein1,#part2:focus ~ #plein2,#part3:focus ~ #plein3,#part4:focus ~ #plein4,#part5:focus ~ #plein5,#part6:focus ~ #plein6{z-index:100; width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>