• Montage 94

    8 images au ratio 16/9 horizontal.

    On peut mettre un fond texturé ou en dégradé sur le montage.

    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:7vw; height:20vw; border:0.2vh solid white;transition:all 1s linear;}
    #mg1{box-sizing:border-box; background:url('http://ekladata.com/lMoGwG96iG_TDfFGJAfQLaQhi6g.jpg'); background-size:60vw 33.75vw; background-position:-2vw -7vw; transform:translate(2vw,7vw);}
    #mg2{box-sizing:border-box; background:url('http://ekladata.com/bTDSeURgRdaGEemwNoMpakm_2p0.jpg'); background-size:60vw 33.75vw; background-position:-9vw -7vw; transform:translate(9vw,7vw);}
    #mg3{box-sizing:border-box; background:url('http://ekladata.com/BVo2KKas8lbl3ZpOK9mxOXPX5JE.jpg'); background-size:60vw 33.75vw; background-position:-16vw -7vw; transform:translate(16vw,7vw);}
    #mg4{box-sizing:border-box; background:url('http://ekladata.com/spBHSx3mScvnqpWwViGALNBUjok.jpg'); background-size:60vw 33.75vw; background-position:-23vw -7vw; transform:translate(23vw,7vw);}
    #mg5{box-sizing:border-box; background:url('http://ekladata.com/6LFNgGRuiCRU4i4JMmXOMn81Jck.jpg'); background-size:60vw 33.75vw; background-position:-30vw -7vw; transform:translate(30vw,7vw);}
    #mg6{box-sizing:border-box; background:url('http://ekladata.com/O9_xr8yh0B09W42DCxQsBBbFNtA.jpg'); background-size:60vw 33.75vw; background-position:-37vw -7vw; transform:translate(37vw,7vw);}
    #mg7{box-sizing:border-box; background:url('http://ekladata.com/qL8gyM6KZb4q6oiT7xNPTbf-MOo.jpg'); background-size:60vw 33.75vw; background-position:-44vw -7vw; transform:translate(44vw,7vw);}
    #mg8{box-sizing:border-box; background:url('http://ekladata.com/3M8ZqItAS0Wzb8oMQnjY7nslYc4.jpg'); background-size:60vw 33.75vw; background-position:-51vw -7vw; transform:translate(51vw,7vw);}
    #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;}
    --></style>