• Montage3

    Clic maintenu sur chaque rond; montage publié en 80% (80vw) de la largeur de l'écran de lecture et code pour montage en 60% (60vw).

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width:60vw; height:33.75vw; margin:1vh auto; border:0.6vh ridge white; background: radial-gradient(ellipse at center, #cedce7 0%,#596a72 100%);">
    <p id="p1" class="par">&nbsp;</p>
    <p id="p2" class="par">&nbsp;</p>
    <p id="p3" class="par">&nbsp;</p>
    <p id="p4" class="par">&nbsp;</p>
    <p id="p5" class="par">&nbsp;</p>
    <p id="p6" class="par">&nbsp;</p>
    <p id="p7" class="par">&nbsp;</p>
    <p id="p8" class="par">&nbsp;</p>
    <p id="p9" class="par">&nbsp;</p>
    <p id="p10" class="par">&nbsp;</p>
    <p id="p11" class="par">&nbsp;</p>
    <p id="p12" class="par">&nbsp;</p>
    </div>
    <style><!--
    .par{position:absolute; z-index:1; width:11vw; height:11vw; border-radius:50%;border:0.25vw solid white; transition:all 1s linear;}
    #p1{transform:translate(2vw,0vw) rotatey(180deg); background:url('http://ekladata.com/n1Vnc_ni5cZuox3Uln9IsRDKJvQ.jpg'); background-size:cover;}
    #p2{transform:translate(17vw,0vw) rotatey(180deg); background:url('http://ekladata.com/ydIKHdtEZVdA-IsvBsC0NTpKWvs.jpg'); background-size:cover;}
    #p3{transform:translate(32vw,0vw) rotatey(180deg); background:url('http://ekladata.com/xtg4Mp_Vt-G2kZqkEMIrH_tOF4c.jpg'); background-size:cover;}
    #p4{transform:translate(47vw,0vw) rotatey(180deg); background:url('http://ekladata.com/44YS4MwGNZs4DNc7xxp-sFAgj9w.jpg'); background-size:cover;}
    #p5{transform:translate(2vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/sy7ww0zvaFcr7trfsEXT33nkPZk.jpg'); background-size:cover;}
    #p6{transform:translate(17vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/UB-1slp8OzonYwhROP5SbgNCN70.jpg'); background-size:cover;}
    #p7{transform:translate(32vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/IKxgvzZJfZJtThUD-wAMrKBPO88.jpg'); background-size:cover;}
    #p8{transform:translate(47vw,11.25vw) rotatey(180deg); background:url('http://ekladata.com/r1SUPiGcirsHJftiwllXkJQ0O6o.jpg'); background-size:cover;}
    #p9{transform:translate(2vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/i8obz3tcOdhA_2JN09D_LJ1SgGY.jpg'); background-size:cover;}
    #p10{transform:translate(17vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/plia4bokiHrc1q4gmJzCB8avCcA.jpg'); background-size:cover;}
    #p11{transform:translate(32vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/HzNL-gbJDNXI8_-LzHp1C0JvnnU.jpg'); background-size:cover;}
    #p12{transform:translate(47vw,22.5vw) rotatey(180deg); background:url('http://ekladata.com/Z1oA3x9-MYQ-VMHB4MGtjbSiEgg.jpg'); background-size:cover;}
    #p1:active,#p2:active,#p3:active,#p4:active,#p5:active,#p6:active,#p7:active,#p8:active,#p9:active,#p10:active,#p11:active,#p12:active{z-index:10; width:60vw; height:33.75vw; border-radius:0%; border:none; transform:translate(0vw,0vw) rotatey(0deg);}
    --></style>