Exemple 189

8 images au ratio 16/9. 

<div style="position: relative; width: 1000px; height: 562px; margin: 5px auto; background: url('http://ekladata.com/AEC0nxbi_22t6NDhiZwSdtxPaos.jpg'); background-size: cover; border: 1px solid black; text-align: left; overflow: hidden;"><input id="cdea" class="cde" type="text" value="A" /> <input id="cdeb" class="cde" type="text" value="B" /> <input id="cdec" class="cde" type="text" value="C" /> <input id="cded" class="cde" type="text" value="D" />
<p id="xxp">Clic sur chaque bouton puis survol de chaque vignette.<br />Retour par clic dans la page.</p>
<p id="pg1" class="pg"><img id="rem1" class="rem" src="http://ekladata.com/VxAeHMRnVezmjRn__DJkuzR8e0k.jpg" alt="" /><img id="rem2" class="rem" src="http://ekladata.com/p_jBXO2_8_InpMY8P_xmrz20NM4.jpg" alt="" /></p>
<p id="pg2" class="pg"><img id="rem3" class="rem" src="http://ekladata.com/_iiIvm6OxvQpLRbK-mYsn58JXas.jpg" alt="" /><img id="rem4" class="rem" src="http://ekladata.com/kVSfPCerPpJ4re88AO84GuDPlgM.jpg" alt="" /></p>
<p id="pg3" class="pg"><img id="rem5" class="rem" src="http://ekladata.com/qg46IovEiKdxc6x1N8nvicS8m9I.jpg" alt="" /><img id="rem6" class="rem" src="http://ekladata.com/sAG6J-hLPPitWT4TlXSXRe_L7Ns.jpg" alt="" /></p>
<p id="pg4" class="pg"><img id="rem7" class="rem" src="http://ekladata.com/iPa14uly-6qx3ldLUQxiDcC_vJQ.jpg" alt="" /><img id="rem8" class="rem" src="http://ekladata.com/rzGUVOvgrmQozazvUHOB5mlA_yA.jpg" alt="" /></p>
</div>

<style><!--
.cde{position:absolute; z-index:3; width:30px; height:30px; text-align:center; font-size:25px;}
#cdea{transform:translate(950px,50px);}
#cdeb{transform:translate(950px,150px);}
#cdec{transform:translate(950px,250px);}
#cded{transform:translate(950px,350px);}
#xxp{position:absolute; z-index:1; width:300px; height:300px; text-align:center; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(0px,10px);}
.pg{position:absolute; z-index:1; width:1000px; height:562px; background:rgba(0,0,0,0.3); transform:translate(-1000px,0px); transition:all 1s linear;}
.rem{position:absolute; z-index:1; width:400px; height:225px; border:6px ridge white; box-shadow:5px 5px 10px black; transition:all 1s linear;}
#rem1{transform:translate(50px,70px) rotate(-15deg);}
#rem2{transform:translate(500px,250px) rotate(15deg);}
#rem3{transform:translate(50px,50px) rotate(10deg);}
#rem4{transform:translate(500px,250px) rotate(-10deg);}
#rem5{transform:translate(50px,50px) rotate(10deg);}
#rem6{transform:translate(500px,250px) rotate(-15deg);}
#rem7{transform:translate(50px,50px) rotate(10deg);}
#rem8{transform:translate(500px,250px) rotate(-5deg);}
#cdea:focus ~ #pg1,#cdeb:focus ~ #pg2,#cdec:focus ~ #pg3,#cded:focus ~ #pg4{z-index:5;transform:translate(0px,0px);}
#rem1:hover,#rem2:hover,#rem3:hover,#rem4:hover,#rem5:hover,#rem6:hover,#rem7:hover,#rem8:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px) rotate(0deg); border:none; box-shadow:none;}
--></style>