• Montage 17

     

     

     

     

     

     

     

     

     

     

    Clic maintenu sur fond et vignettes.

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
    <p id="pp1">&nbsp;</p>
    <p id="pp2" class="ppa">&nbsp;</p>
    <p id="pp3" class="ppa">&nbsp;</p>
    <p id="pp4" class="ppa">&nbsp;</p>
    <p id="pp5" class="ppa">&nbsp;</p>
    <p id="pp6" class="ppa">&nbsp;</p>
    <p id="pp7" class="ppa">&nbsp;</p>
    <p id="pp8" class="ppa">&nbsp;</p>
    <p id="pp9" class="ppa">&nbsp;</p>
    <p id="ex">Clic maintenu sur fond et vignettes.</p>
    </div>
    <hr style="border:0.3vh dashed black;">
    <p style="text-align: center;">...</p>
    <style><!--
    #pp1{position:absolute; z-index:1; width:60vw; height:33.75vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(0vw,0vw); box-sizing:border-box; background:url('http://ekladata.com/z0BsCeYGInxO1Q_FqN2TKhGrEjc.jpg'); background-size:cover;}
    .ppa{position:absolute; z-index:5; width:16vw; height:9vw;border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,filter 1s linear 1s;}
    #pp2{transform:translate(5vw,2.55vw); box-sizing:border-box; background:url('http://ekladata.com/zv2ynzOFTOcw0BehEAGQ_FVKQx0.jpg'); background-size:cover; -webkit-filter:grayscale(1); filter:grayscale(1);}
    #pp3{transform:translate(10vw,5vw); box-sizing:border-box; background:url('http://ekladata.com/Ret5ipkTwM3LrWA2Bss3b_3uYa0.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp4{transform:translate(15vw,7.5vw); box-sizing:border-box; background:url('http://ekladata.com/Q1tqwduNMl6r4-33I7VxwR-gmT0.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp5{transform:translate(20vw,10vw); box-sizing:border-box; background:url('http://ekladata.com/OGyuYFElRFTrbe27CEmnUKls4yw.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp6{transform:translate(25vw,12.5vw); box-sizing:border-box; background:url('http://ekladata.com/l71LShlnxd2k1gwtH3G1M6ML4XE.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp7{transform:translate(30vw,15vw); box-sizing:border-box; background:url('http://ekladata.com/8ehTZ4PKZhsEnbWuGk73JTI5Jxs.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp8{transform:translate(35vw,17.5vw); box-sizing:border-box; background:url('http://ekladata.com/gog2eqjfL2uDmDo-L3ImjTfqEHA.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp9{transform:translate(40vw,20vw); box-sizing:border-box; background:url('http://ekladata.com/WbaABNGpRCB91OuU0WNkjaY65os.jpg'); background-size:cover;-webkit-filtergrayscale(1);filter:grayscale(1);}
    #ex{position:absolute; z-index:1; width:35vw; transform:translate(10vw,31vw); text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #pp1:active,#pp2:active,#pp3:active,#pp4:active,#pp5:active,#pp6:active,#pp7:active,#pp8:active,#pp9:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);-webkit-filter:grayscale(0);filter:grayscale(0); box-shadow:none;}
    --></style>