• Montage 8

    Clic maintenu sur l'image fond et sur chaque partie latérale.

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="br1">&nbsp;</p>
    <p id="br2" class="br">&nbsp;</p>
    <p id="br3" class="br">&nbsp;</p>
    <p id="br4" class="br">&nbsp;</p>
    <p id="br5" class="br">&nbsp;</p>
    <p id="br6" class="br">&nbsp;</p>
    <p id="br7" class="br">&nbsp;</p>
    <p id="br8" class="br">&nbsp;</p>
    <p id="br9" class="br">&nbsp;</p>
    </div>
    <style><!--
    #br1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/icdptsoa-j936e7fzX3gS1TyCCw.jpg'); background-size:cover;}
    .br{position:absolute; z-index:2; width:4vw; height:33.75vw; border:0.1vw solid white; transition:all 1s linear;}
    #br2{background:url('http://ekladata.com/RQq8Y4lx99dJjA_ijwEyohR3lIw.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);box-sizing:border-box;}
    #br3{background:url('http://ekladata.com/qlmA7S2e9l9CT2BmJ6LRrtqH0Lw.jpg'); background-size:60vw 33.75vw; background-position:-4vw 0vw; transform:translate(4vw,0vw);box-sizing:border-box;}
    #br4{background:url('http://ekladata.com/kcOGW45vBQgep6iUvtzNA-7hS7g.jpg'); background-size:60vw 33.75vw; background-position:-8vw 0vw; transform:translate(8vw,0vw);box-sizing:border-box;}
    #br5{background:url('http://ekladata.com/SgTtPFozkAufUKz4OInKsDdUhAs.jpg'); background-size:60vw 33.75vw; background-position:-12vw 0vw; transform:translate(12vw,0vw);box-sizing:border-box;}
    #br6{background:url('http://ekladata.com/3pwygqPGX5HgTUyeUT0lOnowqlo.jpg'); background-size:60vw 33.75vw; background-position:-56vw 0vw; transform:translate(56vw,0vw);box-sizing:border-box;}
    #br7{background:url('http://ekladata.com/_uHHnE80HxAYUX8iaUd8mOnW2-s.jpg'); background-size:60vw 33.75vw; background-position:-52vw 0vw; transform:translate(52vw,0vw);box-sizing:border-box;}
    #br8{background:url('http://ekladata.com/tR7SbEG2Qu1zz7CLt6u3zmDHx20.jpg'); background-size:60vw 33.75vw; background-position:-48vw 0vw; transform:translate(48vw,0vw);box-sizing:border-box;}
    #br9{background:url('http://ekladata.com/8rsuIIilv9368R0QdBVE6HY4qmY.jpg'); background-size:60vw 33.75vw; background-position:-44vw 0vw; transform:translate(44vw,0vw);box-sizing:border-box;}
    #br1:active{z-index:20;}
    #br2:active,#br3:active,#br4:active,#br5:active,#br6:active,#br7:active,#br8:active,#br9:active{z-index:10; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);box-sizing:border-box;}
    --></style>