Montage 319

6 images au ratio 16/9; code en 900px par 506px.

<div style="position: relative; width: 900px; height: 506px; border: 0.1vh solid black; margin: 1vh auto; text-align: left; overflow: hidden;"><input id="dep0" class="dep" type="text" value="clic" /> <input id="dep1" class="dep" type="text" /> <input id="dep2" class="dep" type="text" /> <input id="dep3" class="dep" type="text" /> <input id="dep4" class="dep" type="text" /> <input id="dep5" class="dep" type="text" /> <input id="dep6" class="dep" type="text" />
<p id="frd"><img class="frda" src="http://ekladata.com/XV0NFEhAwr9aUftdziG-IyernFY.jpg" alt="" /><img class="frda" src="http://ekladata.com/TBvaojtpi1XwpQleViTuquYCem0.jpg" alt="" /><img class="frda" src="http://ekladata.com/l0Gru2EC3k4__raN01sBl_ovFfg.jpg" alt="" /><img class="frda" src="http://ekladata.com/Zj5gCadKAHugw6MVGf3N0gakCQk.jpg" alt="" /><img class="frda" src="http://ekladata.com/oWREbvot5CkhBjs41pHzE2vuLtY.jpg" alt="" /><img class="frda" src="http://ekladata.com/AZi1y37CnOdgk2sjdD6Lekc_9oc.jpg" alt="" /></p>
</div>
<style><!--
.dep{position:absolute; z-index:5; width:20px; height:20px; border-radius:5px 0 0 5px; background:rgba(0,0,0,0.5); box-shadow:inset 4px 4px 6px white;}
#dep0{width:40px; transform:translate(850px,20px); font-size:20px; color:white!important;}
#dep1{transform:translate(880px,50px);}
#dep2{transform:translate(880px,100px);}
#dep3{transform:translate(880px,150px);}
#dep4{transform:translate(880px,200px);}
#dep5{transform:translate(880px,250px);}
#dep6{transform:translate(880px,300px);}
.frda{width:900px; height:506px;}
#frd{position:absolute; z-index:1; width:2730px; height:1020px; transform:translate(0px,0px); display:inline-block; transition:all 1s linear;}
#dep1:focus ~ #frd{transform:translate(0px,0px);}
#dep2:focus ~ #frd{transform:translate(-900px,0px);}
#dep3:focus ~ #frd{transform:translate(-1800px,0px);}
#dep4:focus ~ #frd{transform:translate(-1800px,-506px);}
#dep5:focus ~ #frd{transform:translate(-900px,-506px);}
#dep6:focus ~ #frd{transform:translate(0px,-506px);}
--></style>