• Exemple 17

    7 images au ratio 16/9, dimensionnées  dans le code en 1152x648px. On pourrait mélanger des images horizontales et verticales mais le code déviendrait spécifique.

    On peut facilement modifier le survol par une commande au clic maintenu (active).

    Survol

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; background: linear-gradient(to bottom,#FF8000 0%, #F7BE81 100%); margin: 1vh auto; text-align: center;">
    <p id="rr0">Survol</p>
    <p id="rr1" class="rr">&nbsp;</p>
    <p id="rr2" class="rr">&nbsp;</p>
    <p id="rr3" class="rr">&nbsp;</p>
    <p id="rr4" class="rr">&nbsp;</p>
    <p id="rr5" class="rr">&nbsp;</p>
    <p id="rr6" class="rr">&nbsp;</p>
    <p id="rr7" class="rr">&nbsp;</p>
    </div>

    <style><!--
    #rr0{position:absolute; z-index:1; width:10vw; test-align:center; font-size:1.5vw; color:brown; text-shadow:0.1vh 0.1vh black;transform:translate(18vw, 1vw);}
    .rr{position:absolute; z-index:1; width:8vw; height:10vw; border:0.5vh solid grey; box-sizing:border-box; transition:all 1s linear;}
    #rr1{background:url('http://ekladata.com/ScM_7tHVTBhzALImPADXAJrlbnI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-0.25vw -1vw;transform:translate(0.25vw, 1vw);}
    #rr2{background:url('http://ekladata.com/ScM_7tHVTBhzALImPADXAJrlbnI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-8.75vw -11.5vw;transform:translate(8.75vw, 11.5vw);}
    #rr3{background:url('http://ekladata.com/0tI-Np5YMPwtWHEtHzvHW6qE7sM@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-17.25vw -22vw;transform:translate(17.25vw, 22vw);}
    #rr4{background:url('http://ekladata.com/zthPEU1vHNSiQSLPl7YPIjNAp6w@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-25.75vw -11.5vw;transform:translate(25.75vw, 11.5vw);}
    #rr5{background:url('http://ekladata.com/IBImQKGSRyupWCZsrxoYMmW_U9A@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-34.75vw -1vw;transform:translate(34.25vw, 1vw);}
    #rr6{background:url('http://ekladata.com/FmlyiR4g324mPrX-B1PxpLl9PKs@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-42.75vw -11.5vw;transform:translate(42.75vw, 11.5vw);}
    #rr7{background:url('http://ekladata.com/iuO3ueGuSnCvAn5jNTSwwkVMLjc@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-51.25vw -22vw;transform:translate(51.25vw, 22vw);}
    #rr1:hover,#rr2:hover,#rr3:hover,#rr4:hover,#rr5:hover,#rr6:hover,#rr7:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>