• Exemple 13

     4 images horizontales en 16/9 (voy1 à voy4) et 4 images verticales et 16/9 (voy5 à voy 8).

     

     

    Survol


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="pag" class="pa">&nbsp;</p>
    <p id="pad" class="pa">&nbsp;</p>
    <p id="inf">Survol</p>
    <img id="voy1" class="voya" src="http://ekladata.com/ACTrJR4Wzzk0PriMoC1rtrCSM-o@1152x648.jpg" alt="" /> <img id="voy2" class="voya" src="http://ekladata.com/4wF6R1hkM6jZaEDdTZmpCEUQr2Q@1152x648.jpg" alt="" /> <img id="voy3" class="voya" src="http://ekladata.com/nP0kZoFgfsC-4w4JcqHAnx_FIqo@1152x648.jpg" alt="" /> <img id="voy4" class="voya" src="http://ekladata.com/kcfrzzF3XzHnkRbrPeCu_Jx-Xi0@1152x648.jpg" alt="" /> <img id="voy5" class="voyb" src="http://ekladata.com/9sR0b8sIHZGhper-7eklbIRm73s@422x921.jpg" alt="" /> <img id="voy6" class="voyb" src="http://ekladata.com/8tu2VyRaBjdAJGNn-EfZW8kTBMU@422x921.jpg" alt="" /> <img id="voy7" class="voyb" src="http://ekladata.com/PgzUkry_jWF-pkRJuGWkT8c2oBs@422x921.jpg" alt="" /> <img id="voy8" class="voyb" src="http://ekladata.com/9OLYwTqs--BndDIINLF2-8lQ1pE@422x921.jpg" alt="" /></div>

    <style><!--
    #inf{position:absolute; z-index:1; width:15vw; text-align:center; font-size:1.5vw; transform:translate(22.5vw,0vw);}
    .pa{position:absolute; z-index:1; width:25vw; height:30vw; border:0.4vh solid black; background:url('http://ekladata.com/vR2qHVSsUxc8O5Fp_MNHxXpE4X0/back.jpg');}
    #pag{box-shadow:inset -0.4vw 0 1vw black; transform:translate(5vw,2.5vw);}
    #pad{box-shadow:inset 0.4vw 0 1vw black; transform:translate(30vw,2.5vw);}
    .voya{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.4vh ridge white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #voy1{transform:translate(7vw,6vw) rotate(-15deg);}
    #voy2{transform:translate(16vw,20vw) rotate(15deg);}
    #voy3{transform:translate(32vw,20vw) rotate(-15deg);}
    #voy4{transform:translate(41vw,6vw) rotate(15deg);}
    .voyb{position:absolute; z-index:1; width:6.75vw; height:12vw; border:0.4vh ridge white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #voy5{transform:translate(20vw,6vw) rotate(5deg);}
    #voy6{transform:translate(7vw,16vw) rotate(-5deg);}
    #voy7{transform:translate(46vw,16vw) rotate(5deg);}
    #voy8{transform:translate(32vw,6vw) rotate(-5deg);}
    #voy1:hover,#voy2:hover,#voy3:hover,#voy4:hover{z-index:10; width:60vw; height:33.75vw; filter:grayscale(0); transform:translate(0vw,0vw) rotate(0deg);}
    #voy5:hover,#voy6:hover{z-index:10; width:22vw; height:33.75vw; filter:grayscale(0); transform:translate(8vw,0vw) rotate(0deg);}
    #voy7:hover,#voy8:hover{z-index:10; width:22vw; height:33.75vw; filter:grayscale(0); transform:translate(33vw,0vw) rotate(0deg);}
    --></style>