Triptyque 2

En rédigeant le code triptyque, j'ai imaginé une variante, que je vous propose ici.

<div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.5vh ridge white; background: url('https://ekladata.com/CYaw8XOOK_igXyLT9s7m0GHIWT0.jpg'); background-size: 80vw 92vh;">
<input id="tr1" type="text" value="clic1" /><input id="tr2" type="text" value="clic2" /><input id="tr3" type="text" value="clic3" />
<p id="vvv">Clic sur boutons/Survol de l'image centrale.</p>
<p id="t2" class="typ1">&nbsp;</p>
<p id="t1" class="typ1">&nbsp;</p>
<p id="t3" class="typ1">&nbsp;</p>
<p id="t5" class="typ2">&nbsp;</p>
<p id="t4" class="typ2">&nbsp;</p>
<p id="t6" class="typ2">&nbsp;</p>
<p id="t8" class="typ3">&nbsp;</p>
<p id="t7" class="typ3">&nbsp;</p>
<p id="t9" class="typ3">&nbsp;</p>
</div>
<style><!--
@import url('https://fonts.googleapis.com/css?family=Seaweed+Script');
#vvv{position:absolute; z-index:1; width:60vw; background:rgba(0,0,0,0.5);text-align:center; font-size:3vw; font-family: 'Seaweed Script', cursive; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(10vw,82vh);}
#tr1{position:absolute; z-index:5; width:3vw; height:3vh; border-radius:1vh; border:0.1vh solid black; text-align:center; font-size:2vh; background:#FAEBD7; transform:translate(30vw,75vh);}
#tr2{position:absolute; z-index:5; width:3vw; height:3vh; border-radius:1vh;0border:0.1vh solid black; text-align:center; font-size:2vh; background:#FAEBD7; transform:translate(35vw,75vh);}
#tr3{position:absolute; z-index:5; width:3vw; height:3vh; border-radius:1vh;0border:0.1vh solid black; text-align:center; font-size:2vh; background:#FAEBD7; transform:translate(40vw,75vh);}
.typ1{background:url('https://ekladata.com/yewSngy6KoU98tvF8PXqEoSxTCk.jpg'); background-size:70vw 50vh;}
#t1{position:absolute; z-index:2; width:20vw; height:50vh; border:0.4vh solid white; background-position:0vw 0vh; transform-origin:center right; transform:translate(4vw,16vh) skewy(-15deg) rotatey(-60deg); transition:all 1s linear; display:none;}
#t2{position:absolute; z-index:2; width:30vw; height:50vh; border:0.4vh solid white; background-position:-20vw 0vh; transform:translate(24.4vw,16vh); display:none;}
#t3{position:absolute; z-index:2; width:20vw; height:50vh; border:0.4vh solid white; background-position:-50vw 0vh; transform-origin:center left; transform:translate(54.8vw,16vh) skewy(15deg) rotatey(-60deg);transition:all 1s linear; display:none;}
.typ2{background:url('https://ekladata.com/a0cWj86gw9JQjYBMOuhFIOvh7R4.jpg'); background-size:70vw 81vh;}
#t4{position:absolute; z-index:6; width:20vw; height:50vh; border:0.4vh solid white; background-position:0vw 0vh; transform-origin:center right; transform:translate(4vw,16vh) skewy(-15deg) rotatey(-60deg); transition:all 1s linear; display:none;}
#t5{position:absolute; z-index:6; width:30vw; height:50vh; border:0.4vh solid white; background-position:-20vw 0vh; transform:translate(24.4vw,16vh);display:none;}
#t6{position:absolute; z-index:6; width:20vw; height:50vh; border:0.4vh solid white; background-position:-50vw 0vh; transform-origin:center left; transform:translate(54.8vw,16vh) skewy(15deg) rotatey(-60deg);transition:all 1s linear;display:none; }
.typ3{background:url('https://ekladata.com/t50VryZA_2mLZeWwRgcmWcfF9ps.jpg'); background-size:70vw 81vh;}
#t7{position:absolute; z-index:6; width:20vw; height:50vh; border:0.4vh solid white; background-position:0vw 0vh; transform-origin:center right; transform:translate(4vw,16vh) skewy(-15deg) rotatey(-60deg); transition:all 1s linear; display:none;}
#t8{position:absolute; z-index:6; width:30vw; height:50vh; border:0.4vh solid white; background-position:-20vw 0vh; transform:translate(24.4vw,16vh);display:none;}
#t9{position:absolute; z-index:6; width:20vw; height:50vh; border:0.4vh solid white; background-position:-50vw 0vh; transform-origin:center left; transform:translate(54.8vw,16vh) skewy(15deg) rotatey(-60deg);transition:all 1s linear;display:none; }

#t2:hover,#t5:hover,#t8:hover{border:none; }
#t2:hover ~ #t1,#t5:hover ~ #t4,#t8:hover ~ #t7{transform:translate(4.5vw,16vh) skewy(0deg); width:20vw; border:none;}
#t2:hover ~ #t3,#t5:hover ~ #t6,#t8:hover ~ #t9{transform:translate(54.3vw,16vh) skewy(0deg); width:20vw; border:none;}

#tr1:focus,#tr2:focus,#tr3:focus{background:lime;}
#tr1:focus ~ #t1,#tr1:focus ~ #t2,#tr1:focus ~ #t3,#tr2:focus ~ #t4,#tr2:focus ~ #t5,#tr2:focus ~ #t6,#tr3:focus ~ #t7,#tr3:focus ~ #t8,#tr3:focus ~ #t9{display:block;}
--></style>

Les 3x3 parties des images sont invisibles au départ (display:none) et ne s'affichent qu'au clic sur le bouton correspondant (dernière ligne de code).

#tr1:focus ~ #t1,#tr1:focus ~ #t2,#tr1:focus ~ #t3,#tr2:focus ~ #t4,#tr2:focus ~ #t5,#tr2:focus ~ #t6,#tr3:focus ~ #t7,#tr3:focus ~ #t8,#tr3:focus ~ #t9{display:block;}

Remarquez que la partie centrale de chaque image (t2/t5/t8) est écrite en premier de chaque paragraphe image car, pour animer les 2 autres parties, la partie survolée doit être placée en premier (survolé/animé).

<p id="t2" class="typ1">&nbsp;</p>
<p id="t1" class="typ1">&nbsp;</p>
<p id="t3" class="typ1">&nbsp;</p>

Le survol d'une partie centrale efface sa bordure et celle des 2 autres parties. #t2:hover,#t5:hover,#t8:hover{border:none; } 

Le survol de la partie centrale redresse les 2 autres parties de l'image et leur bordure.

#t2:hover ~ #t1,#t5:hover ~ #t4,#t8:hover ~ #t7{transform:translate(4.5vw,16vh) skewy(0deg); width:20vw; border:none;}
#t2:hover ~ #t3,#t5:hover ~ #t6,#t8:hover ~ #t9{transform:translate(54.3vw,16vh) skewy(0deg); width:20vw; border:none;}

 Le bouton cliqué change de couleur de fond: #tr1:focus,#tr2:focus,#tr3:focus{background:lime;}