• Exemple 64

     1+8 images au ratio 16/9 redimensionnées en 1152x648px par le code; presque identique au code précédent, à par 2 ou 3 valeurs. Survol

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/WilcWQVKreF-2KJVRcdQDColFT8@1152x648.jpg'); background-size: cover;">
    <p id="dde1" class="dde">&nbsp;</p>
    <p id="dde2" class="dde">&nbsp;</p>
    <p id="dde3" class="dde">&nbsp;</p>
    <p id="dde4" class="dde">&nbsp;</p>
    <p id="dde5" class="dde">&nbsp;</p>
    <p id="dde6" class="dde">&nbsp;</p>
    <p id="dde7" class="dde">&nbsp;</p>
    <p id="dde8" class="dde">&nbsp;</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    <p id="mg7" class="mg">&nbsp;</p>
    <p id="mg8" class="mg">&nbsp;</p>
    </div>

    <style><!--
    .dde{position:absolute; z-index:5; width:1.5vw; height:1.5vw; border-radius:50%; box-shadow:inset -0.4vh -0.4vh 0.6vh black; background-aqua;}
    #dde1{transform:translate(55vw,2vw);}
    #dde2{transform:translate(55vw,5vw);}
    #dde3{transform:translate(55vw,8vw);}
    #dde4{transform:translate(55vw,11vw);}
    #dde5{transform:translate(55vw,14vw);}
    #dde6{transform:translate(55vw,17vw);}
    #dde7{transform:translate(55vw,20vw);}
    #dde8{transform:translate(55vw,23vw);}
    .mg{position:absolute; z-index:1; width:0vw; height:33.75vw;transform:translate(30vw,0vw); background-size:60vw 33.75vw; transition:all 1s linear;}
    #mg1{background:url('http://ekladata.com/ztEpOWMgr-0cs5CEKwWS-mXlOeM@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg2{background:url('http://ekladata.com/9uB3VnN2Xp2dOhUqXsdDmenR6Go@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg3{background:url('http://ekladata.com/xqZYz8e-XYLu0fyxWhLvhXj-zAc@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg4{background:url('http://ekladata.com/pet_DgI2h_e5JX1H6SdcmRubpOM@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg5{background:url('http://ekladata.com/_GK_myBSewLV1aBPjADjCgpg6xQ@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg6{background:url('http://ekladata.com/3OzQHNODHkG0mvZmLNwg_EDNdLo@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg7{background:url('http://ekladata.com/bzBhD8gm1AnTF0ZmIS6PbvtQ7n0@1152x648.jpg'); background-position:-30vw 0vw;}
    #mg8{background:url('http://ekladata.com/HuJTt2__P2yG3DjoZUEi0Tl11uo@1152x648.jpg'); background-position:-30vw 0vw;}
    #dde1:hover ~ #mg1,#dde2:hover ~ #mg2,#dde3:hover ~ #mg3,#dde4:hover ~ #mg4,#dde5:hover ~ #mg5,#dde6:hover ~ #mg6,#dde7:hover ~ #mg7,#dde8:hover ~ #mg8{z-index:3; width:60vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>