• Exemple 60

     9 images au ratio 16/9 redimensionnées par le code en 1152x648px. Clic sur chaque bouton puis survol images illuminées.

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left;"><input id="chx1" class="chx" type="text" /><input id="chx2" class="chx" type="text" /><input id="chx3" class="chx" type="text" />
    <div id="bloc0" class="bloc">&nbsp;</div>
    <div id="bloc1" class="bloc">
    <p id="bc1a" class="mg">&nbsp;</p>
    <p id="bc1b" class="mg">&nbsp;</p>
    <p id="bc1c" class="mg">&nbsp;</p>
    </div>
    <div id="bloc2" class="bloc">
    <p id="bc2a" class="mg">&nbsp;</p>
    <p id="bc2b" class="mg">&nbsp;</p>
    <p id="bc2c" class="mg">&nbsp;</p>
    </div>
    <div id="bloc3" class="bloc">
    <p id="bc3a" class="mg">&nbsp;</p>
    <p id="bc3b" class="mg">&nbsp;</p>
    <p id="bc3c" class="mg">&nbsp;</p>
    </div>
    </div>

    <style><!--
    .chx{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:50%; border:0.1vh solid black; box-shadow:inset -0.3vh -0.3vh 0.6vh black; background:aqua;}
    #chx1{transform:translate(56vw,3vw);}
    #chx2{transform:translate(56vw,6vw);}
    #chx3{transform:translate(56vw,9vw);}
    .chx:focus{background:red;}
    .bloc{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    #bloc0{z-index:4; background:rgba(255,255,255,0.8);}
    #bloc1{z-index:1;}
    #bloc2{z-index:1;}
    #bloc3{z-index:1;}
    #chx1:focus ~ #bloc1,#chx2:focus ~ #bloc2,#chx3:focus ~ #bloc3{z-index:8;}
    #chx1:focus ~ #bloc0,#chx2:focus ~ #bloc0,#chx3:focus ~ #bloc0{z-index:7;}
    .mg{transition:transform 1s linear, width 1s linear, height 1s linear, background 1s linear;}
    #bc1a{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/rFtqgs-lhfMwRjiog8jg8MSRacI@1152x648.jpg'); background-position:-2vw -4vw; transform:translate(2vw,4vw);}
    #bc1b{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/Bl5GdMhbgWUUavm1ZeLeAWnxjmo@1152x648.jpg'); background-position:-20vw -4vw; transform:translate(20vw,4vw);}
    #bc1c{position:absolute; z-index:2; width:16vw; height:9vw; background:url('http://ekladata.com/DwTvPICBYiAxHJPQ04by5Al8BPg@1152x648.jpg'); background-position:-38vw -4vw; transform:translate(38vw,4vw);}
    #bc2a{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/nDIjbLKTHtk3ci_W_TNOhWfCE5U@1152x648.jpg'); background-position:-2vw -12vw; transform:translate(2vw,12vw);}
    #bc2b{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/EQ3U0vsj3luiAssC9e8rAmngRCA@1152x648.jpg'); background-position:-20vw -12vw; transform:translate(20vw,12vw);}
    #bc2c{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/pz9Ouk1RP8AVScNaE9fIwfNPrPQ@1152x648.jpg'); background-position:-38vw -12vw; transform:translate(38vw,12vw);}
    #bc3a{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/HA57Q_hLaLWu8Qc7-zEhy9rtjB4@1152x648.jpg'); background-position:-2vw -20vw; transform:translate(2vw,20vw);}
    #bc3b{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/vEIhWHcj5zwod80JZZQKoRENlZc@1152x648.jpg'); background-position:-20vw -20vw; transform:translate(20vw,20vw);}
    #bc3c{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/__kfDfXhP_LfGlXASveW3ZOI0rA@1152x648.jpg'); background-position:-38vw -20vw; transform:translate(38vw,20vw);}
    #bc1a:hover,#bc1b:hover,#bc1c:hover,#bc2a:hover,#bc2b:hover,#bc2c:hover,#bc3a:hover,#bc3b:hover,#bc3c:hover{z-index:8; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>