• Montage 79

    8 images au ratio 16/9

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/t9fR7Sk9CTzksVgl8JnUKaJmNXk.jpg'); background-size: cover;">
    <p id="sur">Survol</p>
    <p id="los1" class="los">&nbsp;</p>
    <p id="los2" class="los">&nbsp;</p>
    <p id="los3" class="los">&nbsp;</p>
    <p id="los4" class="los">&nbsp;</p>
    <p id="los5" class="los">&nbsp;</p>
    <p id="los6" class="los">&nbsp;</p>
    <p id="los7" class="los">&nbsp;</p>
    <p id="los8" class="los">&nbsp;</p>
    </div>

    <style><!--
    #sur{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); transform:translate(25vw,0vw); text-align:center; line-height:2vw; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh black;}
    .los{position:absolute; z-index:1; box-sizing:border-box; width:9vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; filter:grayscale(1); transition:all 1s linear;}
    #los1{transform:translate(9vw,5vw) rotate(45deg); background:url('http://ekladata.com/DjVPX8JzRVQhe_8ESqjvr-1ehSk.jpg'); background-size:60vw 33.75vw; background-position:-9vw -5vw;}
    #los2{transform:translate(20vw,5vw) rotate(45deg); background:url('http://ekladata.com/dSNdoo-xrYX44QMbaId_Q9aqkJM.jpg'); background-size:60vw 33.75vw; background-position:-20vw -5vw;}
    #los3{transform:translate(31vw,5vw) rotate(45deg); background:url('http://ekladata.com/CrMAQx2o8UW0X3hF-aORfu19NdI.jpg'); background-size:60vw 33.75vw; background-position:-31vw -5vw;}
    #los4{transform:translate(42vw,5vw) rotate(45deg); background:url('http://ekladata.com/-iA_mLhUaIXBMHdelvYpePaPoO4.jpg'); background-size:60vw 33.75vw; background-position:-42vw -5vw;}
    #los5{transform:translate(9vw,19vw) rotate(45deg); background:url('http://ekladata.com/WEJdOcB-t14Vu3qxXNKuktTDsxw.jpg'); background-size:60vw 33.75vw; background-position:-9vw -19vw;}
    #los6{transform:translate(20vw,19vw) rotate(45deg); background:url('http://ekladata.com/buFe2SSEoVxQAzIU2BAMR3MAU0Q.jpg'); background-size:60vw 33.75vw; background-position:-20vw -19vw;}
    #los7{transform:translate(31vw,19vw) rotate(45deg); background:url('http://ekladata.com/XXp_XDNPbIIglnNjaGLm2IoX-fU.jpg'); background-size:60vw 33.75vw; background-position:-31vw -19vw;}
    #los8{transform:translate(42vw,19vw) rotate(45deg); background:url('http://ekladata.com/yuaroBsjd1f-glQOAJEvqzHAClY.jpg'); background-size:60vw 33.75vw; background-position:-42vw -19vw;}
    #los1:hover,#los2:hover,#los3:hover,#los4:hover,#los5:hover,#los6:hover,#los7:hover,#los8:hover{z-index:5; width:60vw; height:33.75vw; box-shadow:none; border:none; filter:grayscale(0);transform:translate(0vw,0vw) rotate(0deg);background-position:0vw 0vw;}
    --></style>