01.03.2024

Montage en 800x628px pour 1+5 images, modifiable en d'autres dimensions et nombre d'images.

Survol de chaque bouton.  Désolé pour la petite secousse à l'affichage que je ne sais pas résoudre.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left; border: 4px ridge white; box-shadow:4px 4px 8px black; background: url('http://ekladata.com/bam54fIr5WpxKXaL4vMIV2LAtzU.jpg'); background-size: 800px 600px;">
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<p id="bt3" class="bt">&nbsp;</p>
<p id="bt4" class="bt">&nbsp;</p>
<p id="bt5" class="bt">&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>
</div>
<style><!--
.bt{position:absolute; z-index:5; width:80px; height:20px; border:1px solid black; box-shadow:inset 2px 2px 4px black; border-radius:8px 8px 0px 0px; background:coral; }
#bt1{transform:translate(120px,-28px);}
#bt2{transform:translate(240px,-28px);}
#bt3{transform:translate(360px,-28px);}
#bt4{transform:translate(480px,-28px);}
#bt5{transform:translate(600px,-28px);}
.mg{position:absolute; z-index:1; width:80px; height:0px; transition: height 1s 0s,  transform 1s 1s, width 1s 1s, background-position 1s 1s;}
#mg1{background:url('http://ekladata.com/W7sol3JyvXdwvObov_1VIrtZN9c.jpg'); background-size:800px 600px; background-position:-120px 0px;  transform:translate(120px,0px);}
#mg2{background:url('http://ekladata.com/MT8pWEnRHS-j7oXVk1R-afzT5mw.jpg'); background-size:800px 600px; background-position:-240px 0px; transform:translate(240px,0px);}
#mg3{background:url('http://ekladata.com/j-8KSQ8QDK5TuvOjJh1_vPG33OA.jpg'); background-size:800px 600px; background-position:-360px 0px; transform:translate(360px,0px);}
#mg4{background:url('http://ekladata.com/wbp8CeT_GGIK8MSLvPlf4fotMuk.jpg'); background-size:800px 600px; background-position:-480px 0px;  transform:translate(480px,0px);}
#mg5{background:url('http://ekladata.com/c9jpOPZCfV7Qqe0RFQ3h7r4y35k.jpg'); background-size:800px 600px; background-position:-600px 0px; transform:translate(600px,0px);}
.bt:hover{background:lime;}
#bt1:hover ~ #mg1,#bt2:hover ~ #mg2,#bt3:hover ~ #mg3,#bt4:hover ~ #mg4,#bt5:hover ~ #mg5{width:800px; height:600px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>