• Exemple 156

    On peut donner différentes formes géométriques à ce genre de montages: animation au clic gauche maintenu enfoncé.

    Remplacez mes adresses images en bleu par les vôtres, au ratio 16/9; elles sont redimensionnées par le code en 60vw par 33.75vw soit 60% de la largeur de votre écran.

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="hg1" class="hg">&nbsp;</p>
    <p id="hg2" class="hg">&nbsp;</p>
    <p id="hg3" class="hg">&nbsp;</p>
    <p id="hg4" class="hg">&nbsp;</p>
    <p id="hg5" class="hg">&nbsp;</p>
    <p id="hg6" class="hg">&nbsp;</p>
    <p id="hg7" class="hg">&nbsp;</p>
    </div>

    <style><!--
    .hg{position:absolute; z-index:1; border-radius:50%; box-shadow:inset 0vw 0vw 0.2vw 0.1vw black; transition:all 1s linear;}
    #hg1{box-sizing:border-box; width:33.75vw; height:33.75vw; background:url('http://ekladata.com/BM2FMSRdXYJ3ivbmHUOka17VpAY.jpg'); background-size:60vw 33.75vw; background-position:-13vw 0vw; transform:translate(13vw,0vw);}
    #hg2{box-sizing:border-box; width:28.75vw; height:28.75vw; background:url('http://ekladata.com/aL5uyS-_0x8P_GHouWRC8Bek8dU.jpg'); background-size:60vw 33.75vw; background-position:-15.5vw -2.5vw; transform:translate(15.5vw,2.5vw);}
    #hg3{box-sizing:border-box; width:23.75vw; height:23.75vw; background:url('http://ekladata.com/xTURF7EeUm1FogCT07ca1ol5h1s.jpg'); background-size:60vw 33.75vw; background-position:-18vw -5vw; transform:translate(18vw,5vw);}
    #hg4{box-sizing:border-box; width:18.75vw; height:18.75vw; background:url('http://ekladata.com/B9I3SdLzmDB8MBRdABBqhObF-uw.jpg'); background-size:60vw 33.75vw; background-position:-20.5vw -7.5vw; transform:translate(20.5vw,7.5vw);}
    #hg5{box-sizing:border-box; width:13.75vw; height:13.75vw; background:url('http://ekladata.com/Z8kRDAl_UPiw9PwbhXvTS09mtTU.jpg'); background-size:60vw 33.75vw; background-position:-23vw -10vw; transform:translate(23vw,10vw);}
    #hg6{box-sizing:border-box; width:8.75vw; height:8.75vw; background:url('http://ekladata.com/cdFkDwRv_WAxQ2NBBitz6FtUOWs.jpg'); background-size:60vw 33.75vw; background-position:-25.5vw -12.5vw; transform:translate(25.5vw,12.5vw);}
    #hg7{box-sizing:border-box; width:3.75vw; height:3.75vw; background:url('http://ekladata.com/YtGBeAmGDAOnhe6fOl_RZ3VkgzI.jpg'); background-size:60vw 33.75vw; background-position:-28vw -15vw; transform:translate(28vw,15vw);}
    #hg1:active,#hg2:active,#hg3:active,#hg4:active,#hg5:active,#hg6:active,#hg7:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>