-
Montage 338
7 images au ratio 16/9.
Clic
<div style="width: 900px; height: 506px; margin: 10px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/1ypkv7Ab7gzzFyT9RXQlK2hs4XE@900x506.jpg'); background-size: cover;"><input id="mgt1" class="mgt" type="button" /> <input id="mgt2" class="mgt" type="button" /> <input id="mgt3" class="mgt" type="button" /> <input id="mgt4" class="mgt" type="button" /> <input id="mgt5" class="mgt" type="button" /> <input id="mgt6" class="mgt" type="button" />
<p id="inf0"> </p>
<p id="inf1">Clic</p>
<p id="fd1" class="fd"> </p>
<p id="fd2" class="fd"> </p>
<p id="fd3" class="fd"> </p>
<p id="fd4" class="fd"> </p>
<p id="fd5" class="fd"> </p>
<p id="fd6" class="fd"> </p>
</div>
<style><!--
#inf0{position:absolute; z-index:1; width:50px; height:506px; background:rgba(0,0,0,0.5); transform:translate(850px,0px);}
#inf1{position:absolute; z-index:1; width:50px; font-size:20px; text-shadow:1px 1px black; color:white; transform:translate(850px,5px);}
.mgt{position:absolute; z-index:5;}
#mgt1{transform:translate(870px,50px);}
#mgt2{transform:translate(870px,100px);}
#mgt3{transform:translate(870px,150px);}
#mgt4{transform:translate(870px,200px);}
#mgt5{transform:translate(870px,250px);}
#mgt6{transform:translate(870px,300px);}
.fd{position:absolute; z-index:1; width:0px; height:0px; transform:translate(450px,253px); transition:all 1s linear; }
#fd1{background:url('http://ekladata.com/za-DLmOtyIg6mKxUTwsko5TUjVk@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#fd2{background:url('http://ekladata.com/gJbcFh2pWpzTM85PpFdM7f7WBR0@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#fd3{background:url('http://ekladata.com/EYPTnmNudmGZet4ssF82fUD9bmo@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#fd4{background:url('http://ekladata.com/VVaXBvCoNOijgQV-csC2TUux4Gs@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#fd5{background:url('http://ekladata.com/elx7i3NEsuYNJAWv9uCwo2HAXSA@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#fd6{background:url('http://ekladata.com/pEZeSjEYY_hA1YSzGsVBLOIjeLM@900x506.jpg');background-size: 900px 506px; background-position:-450px -253px;}
#mgt1:focus ~ #fd1,#mgt2:focus ~ #fd2,#mgt3:focus ~ #fd3,#mgt4:focus ~ #fd4,#mgt5:focus ~ #fd5,#mgt6:focus ~ #fd6{z-index:3; width:900px; height:506px; transform:translate(0px,0px); background-position:0px 0px;}
--></style>