• Montage 9

    Je pense avoir déjà proposé ce type de montage mais il découle du montage précédent: dans cette version, nous ne plaçons pas d'image de fond et animons les vignettes au clic maintenu.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <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-radius:2vw; border:0.1vw solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #br2{background:url('http://ekladata.com/Gb6Zmspo98pflBCzUpDs8kNarcs.jpg'); background-size:60vw 33.75vw; background-position:-3vw 0vw; transform:translate(3vw,0vw);box-sizing:border-box;}
    #br3{background:url('http://ekladata.com/EKf69HSHjhmswUYE8oRtFnM6z18.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw; transform:translate(10vw,0vw);box-sizing:border-box;}
    #br4{background:url('http://ekladata.com/uLvnFACYau-uuSGsQvkWhzF3Qy0.jpg'); background-size:60vw 33.75vw; background-position:-17vw 0vw; transform:translate(17vw,0vw);box-sizing:border-box;}
    #br5{background:url('http://ekladata.com/cEsUm26qwkFyhQdimqdFjw9D2ow.jpg'); background-size:60vw 33.75vw; background-position:-24vw 0vw; transform:translate(24vw,0vw);box-sizing:border-box;}
    #br6{background:url('http://ekladata.com/8dS5jDNEkwVJVy0UJWCHoSsGo2s.jpg'); background-size:60vw 33.75vw; background-position:-31vw 0vw; transform:translate(31vw,0vw);box-sizing:border-box;}
    #br7{background:url('http://ekladata.com/E0to9LWBGlGhlwPnkpVnoC55woc.jpg'); background-size:60vw 33.75vw; background-position:-38vw 0vw; transform:translate(38vw,0vw);box-sizing:border-box;}
    #br8{background:url('http://ekladata.com/J8QF4B4sxeBaxoCX3CYI3k1yURM.jpg'); background-size:60vw 33.75vw; background-position:-45vw 0vw; transform:translate(45vw,0vw);box-sizing:border-box;}
    #br9{background:url('http://ekladata.com/YTWkXvav4bfSjtb5oJ08TOVUZ_I.jpg'); background-size:60vw 33.75vw; background-position:-52vw 0vw; transform:translate(52vw,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>