-
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"> </div>
<div id="bloc1" class="bloc">
<p id="bc1a" class="mg"> </p>
<p id="bc1b" class="mg"> </p>
<p id="bc1c" class="mg"> </p>
</div>
<div id="bloc2" class="bloc">
<p id="bc2a" class="mg"> </p>
<p id="bc2b" class="mg"> </p>
<p id="bc2c" class="mg"> </p>
</div>
<div id="bloc3" class="bloc">
<p id="bc3a" class="mg"> </p>
<p id="bc3b" class="mg"> </p>
<p id="bc3c" class="mg"> </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>