Photos horiz Clic

Pour bien montrer qu'il est simple de passer du survol au lid, ou inversement...

<div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.2vh solid white; background: linear-gradient(to bottom, rgba(50,100,150,0.9) 0%, rgba(50,100,150,0.5) 100%);"><input id="ong1" class="ong" type="text" value="A" /><input id="ong2" class="ong" type="text" value="B" /><input id="ong3" class="ong" type="text" value="C" /><input id="ong4" class="ong" type="text" value="D" /><input id="ong5" class="ong" type="text" value="E" /><input id="ong6" class="ong" type="text" value="F" /><input id="ong7" class="ong" type="text" value="G" />
<p id="gh0"><br /><br />Clic sur chaque bouton pour afficher une nouvelle image.<br /><br />L'animation est celle de votre choix, le nombre d'images/boutons &eacute;galement.<br /><br />Dans cet exemple; chaque image est en horizontal et au ratio 16/9.</p>
<p id="gh1" class="gh">&nbsp;</p>
<p id="gh2" class="gh">&nbsp;</p>
<p id="gh3" class="gh">&nbsp;</p>
<p id="gh4" class="gh">&nbsp;</p>
<p id="gh5" class="gh">&nbsp;</p>
<p id="gh6" class="gh">&nbsp;</p>
<p id="gh7" class="gh">&nbsp;</p>
</div>

<style><!--
.ong{position:absolute; z-index:15; width:1vw; height:2vw; border:0.1vh solid black; box-shadow:inset -0.2vh -0.2vh 0.2vh black;text-align:center; line-height:2vw; font-size:1vw;}
#ong1{transform:translate(58.5vw,0vw);}
#ong2{transform:translate(58.5vw,2vw);}
#ong3{transform:translate(58.5vw,4vw);}
#ong4{transform:translate(58.5vw,6vw);}
#ong5{transform:translate(58.5vw,8vw);}
#ong6{transform:translate(58.5vw,10vw);}
#ong7{transform:translate(58.5vw,12vw);}
#gh0{position:absolute; z-index:1; width:50vw; height:33.75vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(5vw,0vw);}
.gh{position:absolute; z-index:2; width:60vw; height:33.75vw; transition:transform 1s linear;}
#gh1{background:url('http://ekladata.com/jnqAo29usxO-sy-ITAXi10j5wmI.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh2{background:url('http://ekladata.com/jDVCTXTAKrY3Us8LGs9YOCFjHn8.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh3{background:url('http://ekladata.com/DuOlgCfMyk91bSgb4ChQjQACrGM.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh4{background:url('http://ekladata.com/5k5VX88-nwlCnGujz7FVX8mYTMY.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh5{background:url('http://ekladata.com/wJ4SxhSGt4KgVBHa3FvQzZ7HY0M.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh6{background:url('http://ekladata.com/WKWtxynGAT-MY5i6hA8SGEr1i9c.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#gh7{background:url('http://ekladata.com/T6CR_K_c3FNV92ami1c6lvx_6U8.jpg'); background-size:cover; transform:translate(0vw,0vw) rotatey(90deg);}
#ong1:focus ~ #gh1,#ong2:focus ~ #gh2,#ong3:focus ~ #gh3,#ong4:focus ~ #gh4,#ong5:focus ~ #gh5,#ong6:focus ~ #gh6,#ong7:focus ~ #gh7{z-index:10; transform:translate(0vw,0vw) rotatey(0deg);}
--></style>