• montage 95

    8 images horizontales au ratio 16/9

    Clic maintenu

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="ex">Clic maintenu</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    <p id="mg7" class="mg">&nbsp;</p>
    <p id="mg8" class="mg">&nbsp;</p>
    </div>

    <style><!--
    #ex{position:absolute; z-index:1; width:10vw; border:0.1vh solid black; text-align:center; font-size:1vw; transform:translate(25vw,2vw);}
    .mg{position:absolute; z-index:1; width:9vw; height:9vw; transition:all 1s linear;}
    #mg1{box-sizing:border-box; background:url('http://ekladata.com/aSof0K868fXTrPG07Ki0GxCaxmc.jpg'); background-size:60vw 33.75vw; background-position:-20vw -7vw; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);transform:translate(20vw,7vw);}
    #mg2{box-sizing:border-box; background:url('http://ekladata.com/D-yfNIaBNJbjKpC9F76C5gOvuR0.jpg'); background-size:60vw 33.75vw; background-position:-29.5vw -7vw; -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);transform:translate(29.5vw,7vw);}
    #mg3{box-sizing:border-box; background:url('http://ekladata.com/eVMXS2oof8UkOSgCiN9sOiJiuVE.jpg'); background-size:60vw 33.75vw; background-position:-29.5vw -7.5vw; -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%); transform:translate(29.5vw,7.5vw);}
    #mg4{box-sizing:border-box; background:url('http://ekladata.com/SpSrnGO6dCU0dFbzHUYO03T7QPo.jpg'); background-size:60vw 33.75vw; background-position:-29.5vw -17vw; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%); transform:translate(29.5vw,17vw);}
    #mg5{box-sizing:border-box; background:url('http://ekladata.com/pRiuM7QajvqfyfLuUg9wtcx11Yo.jpg'); background-size:60vw 33.75vw; background-position:-29.5vw -17.5vw; -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%); transform:translate(29.5vw,17.5vw);}
    #mg6{box-sizing:border-box; background:url('http://ekladata.com/3AiGRvKAYCfD_nmEQVyD2IYTyJU.jpg'); background-size:60vw 33.75vw; background-position:-20vw -17.5vw; -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%); transform:translate(20vw,17.5vw);}
    #mg7{box-sizing:border-box; background:url('http://ekladata.com/TxKsdVEurNOeHdQSUawETz6r6Tk.jpg'); background-size:60vw 33.75vw; background-position:-20vw -17vw; -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%); transform:translate(20vw,17vw);}
    #mg8{box-sizing:border-box; background:url('http://ekladata.com/Nqx8Qu0b7EM9mvxVwjnBZPheW4I.jpg'); background-size:60vw 33.75vw; background-position:-20vw -7.5vw; -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%); transform:translate(20vw,7.5vw);}


    #mg1:active,#mg2:active, #mg3:active, #mg4:active,#mg5:active,#mg6:active,#mg7:active,#mg8:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
    --></style>