• Fleur

    9 images au ratio 16/9.

    Clic maintenu

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="maint">Clic maintenu</p>
    <p id="part0">&nbsp;</p>
    <p id="part1" class="part">&nbsp;</p>
    <p id="part2" class="part">&nbsp;</p>
    <p id="part3" class="part">&nbsp;</p>
    <p id="part4" class="part">&nbsp;</p>
    <p id="part5" class="part">&nbsp;</p>
    <p id="part6" class="part">&nbsp;</p>
    <p id="part7" class="part">&nbsp;</p>
    <p id="part8" class="part">&nbsp;</p>
    </div>

    <style><!--
    #maint{position:absolute;z-index:1; width:10vw; text-align:center; font-size:1.2vw; transform:translate(25vw,0vw);}
    #part0{position:absolute; z-index:2; box-sizing:border-box; width:17vw; height:17vw; border-radius:50%; border:0.4vh solid black; box-shadow:inset 0vw 0vw 6vw black; background:url('http://ekladata.com/kWZs8omsqP9-BF7Bdqc0msBJbEM.jpg'); background-size:60vw 33.75vw; background-position:-21.5vw -8.25vw; transform:translate(21.5vw,8.25vw); transition:all 1s linear;}
    .part{position:absolute; z-index:1; box-sizing:border-box; width:7.5vw; height:7.5vw; border-radius:50%; border:0.4vh solid black; box-shadow:inset 0vw 0vw 3vw black; transition:all 1s linear;}
    #part1{transform:translate(26.25vw,3vw); background:url('http://ekladata.com/lxesyh-pJuWmqnPTuD0PH4O2Xsk.jpg'); background-size:60vw 33.75vw; background-position:-26.25vw -3vw;}
    #part2{transform:translate(33vw,6vw); background:url('http://ekladata.com/nw5jF5D9G37UFK60IDAX7K1SVqg.jpg'); background-size:60vw 33.75vw; background-position:-33vw -6vw;}
    #part3{transform:translate(35.5vw,13vw); background:url('http://ekladata.com/Y1EFVU3UYUerluB9w3iRHHb_Glg.jpg'); background-size:60vw 33.75vw; background-position:-35.5vw -13vw;}
    #part4{transform:translate(33vw,20vw); background:url('http://ekladata.com/xpXG9X4bjO_djxnfVLXCn_5sQQw.jpg'); background-size:60vw 33.75vw; background-position:-33vw -20vw;}
    #part5{transform:translate(26.55vw,23vw); background:url('http://ekladata.com/fJebJ7IGJowiufs24FSa28uBNFc.jpg'); background-size:60vw 33.75vw; background-position:-26.55vw -23vw;}
    #part6{transform:translate(19.5vw,20vw); background:url('http://ekladata.com/uHqgDt0bGiML6wgZwQRJRUuSAMY.jpg'); background-size:60vw 33.75vw; background-position:-19.5vw -20vw;}
    #part7{transform:translate(17vw,13vw); background:url('http://ekladata.com/h1JZTSkcKJVXT_J1HRD92YTmbdc.jpg'); background-size:60vw 33.75vw; background-position:-17vw -13vw;}
    #part8{transform:translate(19.5vw,6vw); background:url('http://ekladata.com/erRoQIkfkT02mmI_mRtil7iRWtU.jpg'); background-size:60vw 33.75vw; background-position:-19.5vw -6vw;}
    #part0:active,#part1:active,#part2:active,#part3:active,#part4:active,#part5:active,#part6:active,#part7:active,#part8:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; border: 0.1vh solid black; background-position:0vw 0vw; box-shadow:none; transform:translate(0vw,0vw);}
    --></style>