• Montage 78

    6 images au ratio 16/9

    Survol

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="dac0">Survol</p>
    <p id="dac1">&nbsp;</p>
    <p id="dac2">&nbsp;</p>
    <p id="dac3">&nbsp;</p>
    <p id="dac4">&nbsp;</p>
    <p id="dac5">&nbsp;</p>
    <p id="dac6">&nbsp;</p>
    </div>

    <style><!--
    #dac0{position:absolute; z-index:1; box-sizing:border-box;  width:20vw; height:3.75vw; border:0.4vh solid white; line-height:3.75vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(20vw,15vw);}
    #dac1{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:16.875vw; line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); background-position:0vw 0vw; transform:translate(0vw,0vw); background:url('http://ekladata.com/oY_EnitpBDRs61XjxXUkD-OhbAE.jpg'); background-size:60vw 33.75vw; filter:grayscale(1); transition:all 1s linear;}
    #dac2{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:16.875vw; transform:translate(0vw,16.8755vw); line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);   background:url('http://ekladata.com/q_Zt_VnDM83wfIDZ17U4raFFlrY.jpg'); background-size:60vw 33.75vw; background-position:0vw -16.875vw;filter:grayscale(1); transition:all 1s linear;}
    #dac3{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:15vw; line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);  transform:translate(20vw,0vw); background:url('http://ekladata.com/low7seDMDKRjqsmOygiFyGpMlN8.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; filter:grayscale(1); transition:all 1s linear;}
    #dac4{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:15vw; line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);  transform:translate(20vw,18.75vw); background:url('http://ekladata.com/BGiCQ2PduwNVgsA8K6MRd0lV-_M.jpg'); background-size:60vw 33.75vw; background-position:-20vw -18.75vw; filter:grayscale(1); transition:all 1s linear;}
    #dac5{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:16.875vw; line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);  transform:translate(40vw,0vw); background:url('http://ekladata.com/du1Agy6EypWMI9DqpnK98aC6AQo.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; filter:grayscale(1); transition:all 1s linear;}
    #dac6{position:absolute; z-index:1; box-sizing:border-box; border:0.4vh solid white; width:20vw; height:16.875vw; line-height:5vw; font-size:2vw; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5);  transform:translate(40vw,16.875vw); background:url('http://ekladata.com/gQ_JlxvYKlMcvkwLXrgE4CVFaT4.jpg'); background-size:60vw 33.75vw; background-position:-40vw -16.875vw; filter:grayscale(1); transition:all 1s linear;}
    #dac1:hover,#dac2:hover,#dac3:hover,#dac4:hover,#dac5:hover,#dac6:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>