• Album photos C

    Même principe en plaçant des images verticales et horizontales, comme dans le montage 114.

    J'ai juste ajouté le filtre noir et blanc/couleur, une rotation selon le sens de la vignette (x et y) et les arrondis.

    Clic maintenu


    <div style="width: 60vw; height: 9vw; margin: 6vw auto 1vw auto; text-align: left;"><img id="vgh1" class="vgh" src="http://ekladata.com/zQGRiE4mVhUEEx2ldgIDEuM1MLc.jpg" alt="" /> <img id="vgh2" class="vgh" src="http://ekladata.com/5W33X__nsnNfWbbAXMchJM1hShE.jpg" alt="" /> <img id="vgv1" class="vgv" src="http://ekladata.com/x0vL71HM4awBkI7DvcioEErfwSA.jpg" alt="" /> <img id="vgh3" class="vgh" src="http://ekladata.com/36jcHc7hFJHfWUN5eFZkbw-z0JA.jpg" alt="" /> <img id="vgh4" class="vgh" src="http://ekladata.com/H0FXNbB993yXgGVLwH6SkbH3ox0.jpg" alt="" /> <img id="vgv2" class="vgv" src="http://ekladata.com/Uw8tFPKZ4j5LoJNDNW_CeDBpu84.jpg" alt="" /> <img id="vgh5" class="vgh" src="http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg" alt="" /> <img id="vgh6" class="vgh" src="http://ekladata.com/5oHzl9APwdzK3wiBC39PZyi6-Ds.jpg" alt="" /> <img id="vgv3" class="vgv" src="http://ekladata.com/ppalnjTopCidQfW10DC7VgiZnH4.jpg" alt="" /> <img id="vgh7" class="vgh" src="http://ekladata.com/-G8E9oiTq3_9SvSukf79akrlm2Q.jpg" alt="" /> <img id="vgh8" class="vgh" src="http://ekladata.com/Q-yHxpuDM84ByhjHsrROekT_lK4.jpg" alt="" /> <img id="vgv4" class="vgv" src="http://ekladata.com/tdXd5PLMxFpQXyhXQZZIJwlQGrQ.jpg" alt="" /> <img id="vgh9" class="vgh" src="http://ekladata.com/1IxHriyVYr8zk1msaKqtuMl-e2k.jpg" alt="" /> <img id="vgh10" class="vgh" src="http://ekladata.com/pR-YvB6ihTmZqoNaleuW8Rkpu1Y.jpg" alt="" /></div>
    <style><!--
    .vgh{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.3vh solid white; border-radius:50%; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 1s linear;}
    .vgv{position:absolute; z-index:1; width:5vw; height:9vw; border:0.3vh solid white; border-radius:50%; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 1s linear;}
    #vgh1{box-sizing:border-box; transform:translate(0vw,0vw) rotatex(180deg);}
    #vgh2{box-sizing:border-box; transform:translate(0vw,4.5vw) rotatex(180deg);}
    #vgv1{box-sizing:border-box; transform:translate(8vw,0vw) rotatey(180deg);}
    #vgh3{box-sizing:border-box; transform:translate(13vw,0vw) rotatex(180deg);}
    #vgh4{box-sizing:border-box; transform:translate(13vw,4.5vw) rotatex(180deg);}
    #vgv2{box-sizing:border-box; transform:translate(21vw,0vw) rotatey(180deg);}
    #vgh5{box-sizing:border-box; transform:translate(26vw,0vw) rotatex(180deg);}
    #vgh6{box-sizing:border-box; transform:translate(26vw,4.5vw) rotatex(180deg);}
    #vgv3{box-sizing:border-box; transform:translate(34vw,0vw) rotatey(180deg);}
    #vgh7{box-sizing:border-box; transform:translate(39vw,0vw) rotatex(180deg);}
    #vgh8{box-sizing:border-box; transform:translate(39vw,4.5vw) rotatex(180deg);}
    #vgv4{box-sizing:border-box; transform:translate(47vw,0vw) rotatey(180deg);}
    #vgh9{box-sizing:border-box; transform:translate(52vw,0vw) rotatex(180deg);}
    #vgh10{box-sizing:border-box; transform:translate(52vw,4.5vw) rotatex(180deg);}
    #vgh1:active,#vgh2:active,#vgh3:active,#vgh4:active,#vgh5:active,#vgh6:active,#vgh7:active,#vgh8:active,#vgh9:active,#vgh10:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%;filter:grayscale(0); -webkit-filter:grayscale(0); transform:translate(0vw,-10vw) rotatex(0deg);};}
    #vgv1:active,#vgv2:active,#vgv3:active,#vgv4:active{z-index:5; width:19vw; height:33.75vw; border-radius:0%;filter:grayscale(0); -webkit-filter:grayscale(0); transform:translate(20vw,-10vw) rotatey(0deg);} ;}
    --></style>