Triptyque - montages par codes HTML/CSS

Un commentaire de Yann me fait penser à ce genre de présentation; survolez chaque panneau.

<div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.5vh ridge white; background: url('https://ekladata.com/4cRj3ZOMt21Z9jUgtzCXZRPDtpI.jpg'); background-size: 80vw 92vh;"><input id="tr1" type="text" value="clic1" /><input id="tr2" type="text" value="clic2" />
<p id="t1"> </p>
<p id="t2"> </p>
<p id="t3"> </p>
<p id="t4"> </p>
<p id="t5"> </p>
<p id="t6"> </p>
</div>
<hr style="border: 0.3vh double grey;" />
<p>...</p>
<hr style="border: 0.3vh double grey;" />
<style><!--
#tr1{position:absolute; z-index:5; width:3vw; height:3vh; border:0.1vh solid black; text-align:center; font-size:2vh; background:#FAEBD7; transform:translate(35vw,80vh);}
#tr2{position:absolute; z-index:5; width:3vw; height:3vh; border:0.1vh solid black; text-align:center; font-size:2vh; background:#FAEBD7; transform:translate(45vw,80vh);}
#t1{position:absolute; z-index:2; width:20vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/2dmhe8e-Npgyi9UrVAvH_sWOHJ4.jpg'); background-size:cover; transform:translate(30vw,10vh); transition:all 1s linear;}
#t2{position:absolute; z-index:2; width:15vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/T6EyPLrbBFFrJwBUa8oSNTQLeEI.jpg'); background-size:cover; transform:translate(14.5vw,16vh) skewy(-20deg); transition:all 1s linear;}
#t3{position:absolute; z-index:2; width:15vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/xDOqINvsbkaXKJTqWM0nBmPUAdU.jpg'); background-size:cover; transform:translate(50.5vw,16vh) skewy(20deg); transition:all 1s linear;}
#t4{position:absolute; z-index:3; width:20vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/aU39YbuRUyAxH5BG5wymMdn1p8c.jpg'); background-size:cover; transform:translate(30vw,10vh); display:none; transition:all 1s linear;}
#t5{position:absolute; z-index:3; width:15vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/GN4G6PKVyrqoEvIwIuCDIlEZ-5Y.jpg'); background-size:cover; transform:translate(14.5vw,16vh) skewy(-20deg); display:none; transition:all 1s linear;}
#t6{position:absolute; z-index:3; width:15vw; height:50vh; border:0.5vh solid brown; background:url('https://ekladata.com/-ZIsvQM4NgA3fLimzxTYPAMrcR4.jpg'); background-size:cover; transform:translate(50.5vw,16vh) skewy(20deg); display:none; transition:all 1s linear;}

#t1:hover,#t2:hover,#t3:hover,#t4:hover,#t5:hover,#t6:hover{z-index:10; width:70vw; height:81vh; transform:translate(5vw,5vh);}
#tr2:focus ~ #t4,#tr2:focus ~ #t5,#tr2:focus ~ #t6{display:block;)
--></style>