• Montage 111

    Nyons 26100

    Puisqu'il y a des amateurs et amatrices des rotations et du changement de couleur...

    Clic maintenu

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="cxp">Clic maintenu</p>
    <p id="cx1" class="cx">&nbsp;</p>
    <p id="cx2" class="cx">&nbsp;</p>
    <p id="cx3" class="cx">&nbsp;</p>
    <p id="cx4" class="cx">&nbsp;</p>
    <p id="cx5" class="cx">&nbsp;</p>
    <p id="cx6" class="cx">&nbsp;</p>
    <p id="cx7" class="cx">&nbsp;</p>
    <p id="cx8" class="cx">&nbsp;</p>
    </div>

    <style><!--
    #cxp{position:absolute; z-index:1; width:12vw; text-align:center; font-size:1.2vw; transform:translate(24vw,0vw);}
    .cx{position:absolute; z-index:1; width:8vw; height:12vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; filter:grayscale(1); -webkit-filter:grayscale(1);transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #cx1{box-sizing:border-box; background:url('http://ekladata.com/TGGvYKTBDls-cm-G_3vPnVWNjus.jpg'); background-position:-4vw -3vw; background-size:60vw 33.75vw; transform:translate(4vw,3vw) rotatey(180deg);}
    #cx2{box-sizing:border-box; background:url('http://ekladata.com/9qICYE3AAfOYUQ3p2QJAZdwQL7I.jpg'); background-position:-18vw -3vw; background-size:60vw 33.75vw; transform:translate(18vw,3vw) rotatey(180deg);}
    #cx3{box-sizing:border-box; background:url('http://ekladata.com/9R8DeFFyZwUcili_5eQJGCuUz5g.jpg'); background-position:-32vw -3vw; background-size:60vw 33.75vw; transform:translate(32vw,3vw) rotatey(180deg);}
    #cx4{box-sizing:border-box; background:url('http://ekladata.com/J_MeV56IUBkWWx4CYOSC-ir0x4c.jpg'); background-position:-46vw -3vw; background-size:60vw 33.75vw; transform:translate(46vw,3vw) rotatey(180deg);}
    #cx5{box-sizing:border-box; background:url('http://ekladata.com/ymi3wRBRcYBXmk_AbCdK028EsXw.jpg'); background-position:-4vw -18vw; background-size:19vw 33.75vw; transform:translate(4vw,18vw) rotatey(180deg);}
    #cx6{box-sizing:border-box; background:url('http://ekladata.com/U9twbmJidNu1eyFNFaIDLza1jvs.jpg'); background-position:-18vw -18vw; background-size:19vw 33.75vw; transform:translate(18vw,18vw) rotatey(180deg);}
    #cx7{box-sizing:border-box; background:url('http://ekladata.com/bgCZSVFC0-N-oxtjDTfu1ZTrsGs.jpg'); background-position:-32vw -18vw; background-size:19vw 33.75vw; transform:translate(32vw,18vw) rotatey(180deg);}
    #cx8{box-sizing:border-box; background:url('http://ekladata.com/SdYaWAmACQyFUKmDn3mV7WjIv1E.jpg'); background-position:-46vw -18vw; background-size:19vw 33.75vw; transform:translate(46vw,18vw) rotatey(180deg);}
    #cx1:active,#cx2:active,#cx3:active,#cx4:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(0deg); background-position:0vw 0vw; filter:grayscale(0); -webkit-filter:grayscale(0);}
    #cx5:active,#cx6:active,#cx7:active,#cx8:active{z-index:5; width:19vw; height:33.75vw; transform:translate(20vw,0vw) rotatey(0deg); background-position:0vw 0vw; filter:grayscale(0); -webkit-filter:grayscale(0);}
    --></style>