Plein écran 30

Retour sur les images en plein écran, pour m'amuser. Comme vous le voyez, le code est simple; mes images sont hébergées en 1920x1080px.

<div style="width: 60vw; height: 5vw; margin: 1vh auto; text-align: left;"><input id="par1" class="part" type="text" value="Clic image1" /> <input id="par2" class="part" type="text" value="Clic image2" /> <input id="par3" class="part" type="text" value="Clic image3" /> <input id="par4" class="part" type="text" value="Clic image4" /> <input id="par5" class="part" type="text" value="Clic image5" /> <img id="pl1" class="pl" src="http://ekladata.com/yrW94Du2gi0ZFTF8PUbsm4uHsT4.jpg" alt="" /> <img id="pl2" class="pl" src="http://ekladata.com/uFKMJSOUHMswGGqdcnhaZNcflzw.jpg" alt="" /> <img id="pl3" class="pl" src="http://ekladata.com/xeTz50NSASh6t03VmYyt5cbhWDU.jpg" alt="" /> <img id="pl4" class="pl" src="http://ekladata.com/KACMnLJqPzO8Qu3-8GzTkgIcThw.jpg" alt="" /> <img id="pl5" class="pl" src="http://ekladata.com/e7YhmxdHNYQ4bt7JkxXPDG8ExpQ.jpg" alt="" /></div>

<style><!--
.part{z-index:1; width:10vw; height:3vw; border-radius:1.5vw; text-align:center; float:left; margin:1vh; font-size:1.5vw; background:linear-gradient(to bottom, grey 0%, bisque 100%);box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white;}
.pl{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; background-position:50vw 0vw; transition:all 1s linear;}
#par1:focus ~ #pl1,#par2:focus ~ #pl2,#par3:focus ~ #pl3,#par4:focus ~ #pl4,#par5:focus ~ #pl5{z-index:100; width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>