10.05.2024

 Toujours dans les illustrations de la commande "active", dans un montage en 1100px par 618px (16/9), avec 4 images horizontales et 2 verticales.

Clic maintenu

<div style="width: 1100px; height: 618px; margin: 50px auto; text-align: left;"><img id="jarh1" class="jarh" src="http://ekladata.com/1i3-GCpEzQPGDe2__yUNuCzhWAc.jpg" alt="" /> <img id="jarh2" class="jarh" src="http://ekladata.com/cQaZHciHRROryWQwY_g4CrKNZrs.jpg" alt="" /> <img id="jarh3" class="jarh" src="http://ekladata.com/ogbTlytRbhJ-4YdIIijA1bpJOq4.jpg" alt="" /> <img id="jarh4" class="jarh" src="http://ekladata.com/GKvTpG5c56yKuiTNM6dlyD9-za4.jpg" alt="" /> <img id="jarv1" class="jarv" src="http://ekladata.com/6dRguOLoRlQUFyMb6yDoCKTNDEo.jpg" alt="" /> <img id="jarv2" class="jarv" src="http://ekladata.com/CFPG2sy7pfiAD41KbkDhHjbmFPQ.jpg" alt="" />
<p id="act">Clic maintenu</p>
</div>

<style><!--
.jarh{position:absolute; z-index:1; width:550px; height:309px; border:4px ridge white; transition:all 1s;}
.jarv{position:absolute; z-index:1; width:174px; height:309px; border:4px ridge white; transition:all 1s;}
#jarh1{box-sizing:border-box; transform:translate(0px,0px);}
#jarh2{box-sizing:border-box; transform:translate(550px,0px);}
#jarh3{box-sizing:border-box; transform:translate(550px,309px);}
#jarh4{box-sizing:border-box; transform:translate(0px,309px);}
#jarv1{box-sizing:border-box; transform:translate(200px,154px);}
#jarv2{box-sizing:border-box; transform:translate(726px,154px);}
#act{position:absolute; z-index:1; width:200px; font-size:25px; color:white; text-shadow:1px 1px black; text-align:center; background:rgba(0,0,0,0.5); transform:translate(450px,200px);}
#jarh1:active,#jarh2:active,#jarh3:active,#jarh4:active{z-index:5; width:1100px; height:618px; transform:translate(0px,0px);}
#jarv1:active{z-index:5; width:348px; height:618px; transform:translate(113px,0px);}
#jarv2:active{z-index:5; width:348px; height:618px; transform:translate(639px,0px);}
--></style>