• Montage 100

    8 images horizontales au ratio 16/9 dans un montage de 60% de la largeur de votre écran.

    Les 4 du haut sont animées avec une rotation au clic maintenu; les 4 du bas s'agrandissent sans rotation.

    De gauche à droite, les images agrandies ont une arrondi de 50%, de 30%, de 10vw et de 0%, soit rectangulaire.

    A vous de choisir l'animation qui vous convient.

    Survol puis clic maintenu

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="rd0">Survol puis clic maintenu</p>
    <p id="rd1" class="rd">&nbsp;</p>
    <p id="rd2" class="rd">&nbsp;</p>
    <p id="rd3" class="rd">&nbsp;</p>
    <p id="rd4" class="rd">&nbsp;</p>
    <p id="rd5" class="rd">&nbsp;</p>
    <p id="rd6" class="rd">&nbsp;</p>
    <p id="rd7" class="rd">&nbsp;</p>
    <p id="rd8" class="rd">&nbsp;</p>
    </div>
    <style><!--
    #rd0{position:absolute; z-index:1; width:20vw; transform:translate(20vw,1vw); border:0.1vh solid black; text-align:center; font-size:1.2vw;}
    .rd{position:absolute; z-index:1; width:10vw; height:10vw; border-radius:50%; border:0.5vh ridge white; box-shadow:-0.4vh 0.4vh 0.6vh black; opacity:0.5; transition:opacity 0s linear, transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s;}
    #rd1{box-sizing:border-box; background:url('http://ekladata.com/VEgY4mOiLGUkn6Sjk8LfiQzzIfU.jpg'); background-size:cover; background-position:50%; transform:translate(4vw,4vw) rotatey(180deg);}
    #rd2{box-sizing:border-box; background:url('http://ekladata.com/RM46BFvArX42Z4ARjInKwysPZS0.jpg'); background-size:cover; background-position:50%; transform:translate(18vw,4vw) rotatey(180deg);}
    #rd3{box-sizing:border-box; background:url('http://ekladata.com/YJyHAyIw3V72t7nNPQ2-w-uxSOE.jpg'); background-size:cover; background-position:50%; transform:translate(32vw,4vw) rotatey(180deg);}
    #rd4{box-sizing:border-box; background:url('http://ekladata.com/YY9HENWFj_99ujl95NExYyRMJI0.jpg'); background-size:cover; background-position:50%; transform:translate(46vw,4vw) rotatey(180deg);}
    #rd5{box-sizing:border-box; background:url('http://ekladata.com/3UVk6b0NbnglITu1rXKK0CPufUg.jpg'); background-size:cover; background-position:50%; transform:translate(4vw,18vw);}
    #rd6{box-sizing:border-box; background:url('http://ekladata.com/hRjUUJXhqXYwpc0BYWf6dGuXPQg.jpg'); background-size:cover; background-position:50%; transform:translate(18vw,18vw);}
    #rd7{box-sizing:border-box; background:url('http://ekladata.com/6-63yenqTcNWutHJSSY703xc_zs.jpg'); background-size:cover; background-position:50%; transform:translate(32vw,18vw);}
    #rd8{box-sizing:border-box; background:url('http://ekladata.com/bg8LwADlHc_clxwqbT0_z0oqtOw.jpg'); background-size:cover; background-position:50%; transform:translate(46vw,18vw);}
    #rd1:hover,#rd2:hover,#rd3:hover,#rd4:hover,#rd5:hover,#rd6:hover,#rd7:hover,#rd8:hover{opacity:1;}
    #rd1:active{z-index:5; width:60vw; height:33.75vw; border-radius:50%; box-shadow:none; transform:translate(0vw,0vw) rotatey(0deg);}
    #rd2:active{z-index:5; width:60vw; height:33.75vw; border-radius:30%; box-shadow:none; transform:translate(0vw,0vw) rotatey(0deg);}
    #rd3:active{z-index:5; width:60vw; height:33.75vw; border-radius:10vw; box-shadow:none; transform:translate(0vw,0vw) rotatey(0deg);}
    #rd4:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; transform:translate(0vw,0vw) rotatey(0deg);}
    #rd5:active{z-index:5; width:60vw; height:33.75vw; border-radius:50%; box-shadow:none; transform:translate(0vw,0vw);}
    #rd6:active{z-index:5; width:60vw; height:33.75vw; border-radius:30%; box-shadow:none; transform:translate(0vw,0vw);}
    #rd7:active{z-index:5; width:60vw; height:33.75vw; border-radius:10vw; box-shadow:none; transform:translate(0vw,0vw);}
    #rd8:active{z-index:5; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; transform:translate(0vw,0vw);}
    --></style>