• Montage 55

    Les images animées (gif) peuvent être remplacées par des images fixes, ce qui allège le montage.

    Clic maintenu jusqu'à coloration.

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 1vh auto; background: linear-gradient(to top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);">
    <p id="aaa">Clic maintenu jusqu'à coloration.</p>
    <p id="zz1" class="zz">&nbsp;</p>
    <p id="zz2" class="zz">&nbsp;</p>
    <p id="zz3" class="zz">&nbsp;</p>
    <p id="zz4" class="zz">&nbsp;</p>
    <p id="zz5" class="zz">&nbsp;</p>
    <p id="zz6" class="zz">&nbsp;</p>
    <p id="zz7" class="zz">&nbsp;</p>
    <p id="zz8" class="zz">&nbsp;</p>
    <p id="zz9" class="zz">&nbsp;</p>
    <p id="zz10" class="zz">&nbsp;</p>
    </div>
    <style><!--
    #aaa{position:absolute; z-index:1; width:30vw; transform:translate(15vw,0vw);text-align:center; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; color:white;}
    .zz{position:absolute; z-index:1; width:15vw; height:4vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:2.5vw; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, margin 1s linear 1s, width 1s linear 1s, height 1s linear 1s, border 1s linear 1s, border-radius 1s linear 1s, filter 2s linear 2s;}
    #zz1{box-sizing:border-box; margin:4vw 0 0 4vw; transform:rotatey(180deg); background:url('http://ekladata.com/uAO3YT5U7OqQuUTPM-RUdViIlfE.gif'); background-size:cover;}
    #zz2{box-sizing:border-box; margin:4vw 0 0 23vw; transform:rotatey(180deg); background:url('http://ekladata.com/KErIorsPflRC553hsoG-ZjJZYWs.gif'); background-size:cover;}
    #zz3{box-sizing:border-box; margin:4vw 0 0 42vw; transform:rotatey(180deg); background:url('http://ekladata.com/9cx_spK_kS5l80kznziOi8w-m28.gif'); background-size:cover;}
    #zz4{box-sizing:border-box; margin:12vw 0 0 11.5vw; transform:rotatey(180deg); background:url('http://ekladata.com/yvVNYw5Xxw5uzu0JAmqHHOCGS1k.gif'); background-size:cover;}
    #zz5{box-sizing:border-box; margin:12vw 0 0 30.5vw; transform:rotatey(180deg); background:url('http://ekladata.com/HQMVSSmaiS5eApiEJHwzmLE5tF0.gif'); background-size:cover;}
    #zz6{box-sizing:border-box; margin:20vw 0 0 4vw; transform:rotatey(180deg); background:url('http://ekladata.com/ortk5WISq-xfrpcIF-vhvk2GjhE.jpg'); background-size:cover;}
    #zz7{box-sizing:border-box; margin:20vw 0 0 23vw; transform:rotatey(180deg); background:url('http://ekladata.com/KYUNVM_IxEq1XrN13gNGtiZmRbw.jpg'); background-size:cover;}
    #zz8{box-sizing:border-box; margin:20vw 0 0 42vw; transform:rotatey(180deg); background:url('http://ekladata.com/t5e2CaSarFxDj1leBy2Npf9yx3Y.jpg'); background-size:cover;}
    #zz9{box-sizing:border-box; margin:28vw 0 0 11.5vw; transform:rotatey(180deg); background:url('http://ekladata.com/ti8sp0wTL1KWRP1TDHryE-OuKVw.jpg'); background-size:cover;}
    #zz10{box-sizing:border-box; margin:28vw 0 0 30.5vw; transform:rotatey(180deg); background:url('http://ekladata.com/RJAwhFqAf4aqizH3uOYSdFyd598.jpg'); background-size:cover;}


    #zz1:active,#zz2:active,#zz3:active,#zz4:active,#zz5:active,#zz6:active,#zz7:active,#zz8:active,#zz9:active,#zz10:active{z-index:10; transform:rotatey(0deg); margin: 0 0 0 0; width:60vw; height:33.75vw; border:none; border-radius:0%;filter:grayscale(0);-webkit-filter:grayscale(0);}
    --></style>