• 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">&nbsp;</p>
    <p id="inf1">Clic</p>
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    <p id="fd5" class="fd">&nbsp;</p>
    <p id="fd6" class="fd">&nbsp;</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>