• Exemple 69

    1+7 images, au ratio 16/9, redimensionnées par le code en 1152x648px. Survol des vignettes de droite.

    Chaque image est découpée en 2 parties.

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/uEPmDpuJt5HoHRJ7P0ASzD63wak@1152x648.jpg'); background-size: cover;">
    <p id="azehd1" class="azeh">&nbsp;</p>
    <p id="azehd2" class="azeh">&nbsp;</p>
    <p id="azehd3" class="azeh">&nbsp;</p>
    <p id="azehd4" class="azeh">&nbsp;</p>
    <p id="azevd1" class="azev">&nbsp;</p>
    <p id="azevd2" class="azev">&nbsp;</p>
    <p id="azevd3" class="azev">&nbsp;</p>
    <p id="azehg1" class="azeh">&nbsp;</p>
    <p id="azehg2" class="azeh">&nbsp;</p>
    <p id="azehg3" class="azeh">&nbsp;</p>
    <p id="azehg4" class="azeh">&nbsp;</p>
    <p id="azevg1" class="azev">&nbsp;</p>
    <p id="azevg2" class="azev">&nbsp;</p>
    <p id="azevg3" class="azev">&nbsp;</p>
    </div>
    <style><!--
    .azeh{position:absolute; z-index:1; width:6vw; height:4vw; border:0.4vh solid white; background-size:60vw 33.75vw; transition:all 1s linear;}
    .azev{position:absolute; z-index:1; width:4vw; height:6vw; border:0.4vh solid white; background-size:60vw 33.75vw; transition:all 1s linear;}
    #azehd1{background:url('http://ekladata.com/CKVcwpy_wuEQAycnu52Ac_Kd2nM@1152x648.jpg'); background-position:-38vw 0vw; transform:translate(38vw,0vw);}
    #azehd2{background:url('http://ekladata.com/TAPaPhpitZw959AGvNtWMkah2yE@1152x648.jpg'); background-position:-48vw 0vw; transform:translate(48vw,0vw);}
    #azehd3{background:url('http://ekladata.com/Eh13a1eafE_vrXU1UOzgdMkSois@1152x648.jpg'); background-position:-38vw -29.5vw; transform:translate(38vw,29.5vw);}
    #azehd4{background:url('http://ekladata.com/m1QZ-rYoATwW7enMnB7wyOW5GlI@1152x648.jpg'); background-position:-48vw -29.5vw; transform:translate(48vw,29.5vw);}
    #azevd1{background:url('http://ekladata.com/yh-ImYeXccO3xeRg2XVRb1RTCuQ@1152x648.jpg'); background-position:-55.7vw -5vw; transform:translate(55.7vw,5vw);}
    #azevd2{background:url('http://ekladata.com/2AVP-xomzI_AkgXHfgM6qkRoUgQ@1152x648.jpg'); background-position:-55.7vw -13vw; transform:translate(55.7vw,13vw);}
    #azevd3{background:url('http://ekladata.com/XLujF3pl5Gn67cXTZFjRyc0aLAg@1152x648.jpg'); background-position:-55.7vw -21vw; transform:translate(55.7vw,21vw);}
    #azehg1{background:url('http://ekladata.com/CKVcwpy_wuEQAycnu52Ac_Kd2nM@1152x648.jpg'); background-position:-6vw 0vw; transform:translate(6vw,0vw);}
    #azehg2{background:url('http://ekladata.com/TAPaPhpitZw959AGvNtWMkah2yE@1152x648.jpg'); background-position:-16vw 0vw; transform:translate(16vw,0vw);}
    #azehg3{background:url('http://ekladata.com/Eh13a1eafE_vrXU1UOzgdMkSois@1152x648.jpg'); background-position:-6vw -29.5vw; transform:translate(6vw,29.5vw);}
    #azehg4{background:url('http://ekladata.com/m1QZ-rYoATwW7enMnB7wyOW5GlI@1152x648.jpg'); background-position:-16vw -29.5vw; transform:translate(16vw,29.5vw);}
    #azevg1{background:url('http://ekladata.com/yh-ImYeXccO3xeRg2XVRb1RTCuQ@1152x648.jpg'); background-position:-0vw -5vw; transform:translate(0vw,5vw);}
    #azevg2{background:url('http://ekladata.com/2AVP-xomzI_AkgXHfgM6qkRoUgQ@1152x648.jpg'); background-position:-0vw -13vw; transform:translate(0vw,13vw);}
    #azevg3{background:url('http://ekladata.com/XLujF3pl5Gn67cXTZFjRyc0aLAg@1152x648.jpg'); background-position:-0vw -21vw; transform:translate(0vw,21vw);}
    #azehd1:hover,#azehd2:hover,#azehd3:hover,#azehd4:hover,#azevd1:hover,#azevd2:hover,#azevd3:hover{z-index:5; width:30vw; height:33.75vw; border:none; background-position:-30vw 0vw; transform:translate(30vw,0vw);}
    #azehd1:hover ~ #azehg1,#azehd2:hover ~ #azehg2,#azehd3:hover ~ #azehg3,#azehd4:hover ~ #azehg4,#azevd1:hover ~ #azevg1,#azevd2:hover ~ #azevg2,#azevd3:hover ~ #azevg3{z-index:5; width:30vw; height:33.75vw; border:none; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>