Montage 246

Clic sur chaque bouton pour changer d'image puis Survol de chaque image pour l'afficher en grande taille .

6 images en 1920px par 1080px, ratio 16/9.

<div style="width: 800px; height: 450px; margin: 5px auto; border: 3px ridge grey; text-align: left;"><input id="chg1" class="chg" type="button" /><input id="chg2" class="chg" type="button" /><input id="chg3" class="chg" type="button" /><input id="chg4" class="chg" type="button" /><input id="chg5" class="chg" type="button" /><input id="chg6" class="chg" type="button" />
<p id="zb">&nbsp;</p>
<p id="zz1" class="zz">&nbsp;</p>
<p id="zz2" class="zz">&nbsp;</p>
<p id="zz3" class="zz">&nbsp;</p>
<p id="zz4" class="zz">&nbsp;</p>
<p id="zz5" class="zz">&nbsp;</p>
<p id="zz6" class="zz">&nbsp;</p>
</div>
<style><!--
.chg{position:absolute; z-index:5; font-size:30px; border-radius:50%;}
#chg1{transform:translate(780px,10px);}
#chg2{transform:translate(780px,60px);}
#chg3{transform:translate(780px,110px);}
#chg4{transform:translate(780px,160px);}
#chg5{transform:translate(780px,210px);}
#chg6{transform:translate(780px,260px);}
#zb{position:absolute; z-index:4; width:30px; height:450px; background:rgba(0,0,0,0.3); transform:translate(770px,0px);}
.zz{position:absolute; z-index:2; width:800px; height:450px; transition:all 1s linear;}
#zz1{background:url('http://ekladata.com/o6lwk_-Mv2-D2dEL5nsriSgosz8.jpg'); background-size:4000px 2250px; background-position:-1600px -700px;}
#zz2{z-index:1; background:url('http://ekladata.com/fI2dJ4ZHNE9tfotkemNLIxcW21M.jpg'); background-size:4000px 2250px; background-position:-1600px -1400px;}
#zz3{z-index:1; background:url('http://ekladata.com/K1PaFaBZStQIELdN_PVLLg3qOXY.jpg'); background-size:4000px 2250px; background-position:-1800px -1700px;}
#zz4{z-index:1; background:url('http://ekladata.com/5V2vFgs8gICC4Qna5vzrDGyzV_Y.jpg'); background-size:4000px 2250px; background-position:-1600px -1000px;}
#zz5{z-index:1; background:url('http://ekladata.com/GbE53Cnb9-9SbqDnUP5-sM5XBmY.jpg'); background-size:4000px 2250px; background-position:-1600px -1000px;}
#zz6{z-index:1; background:url('http://ekladata.com/IVjGIJ43UlGQhKYN65d6vFii_oU.jpg'); background-size:4000px 2250px; background-position:-1800px -800px;}
#chg2:focus ~ #zz2,#chg3:focus ~ #zz3,#chg4:focus ~ #zz4,#chg5:focus ~ #zz5,#chg6:focus ~ #zz6{z-index:3;}
#zz1:hover,#zz2:hover,#zz3:hover,#zz4:hover,#zz5:hover,#zz6:hover{background-size:800px 450px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>