Mont.19.5.23

Variante du montage 14.5.23.

1 + 8 images au ratio 16/9 en 1100x619px, modifiable à vos paramètres.

Survol boutons.

A

B

C

D

E

F

G

H

 

 

 

 

 

 

 

 

<div style="width: 1100px; height: 619px; border: 3px solid white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left;"><img id="fd" src="http://ekladata.com/eQf1cvIIz9I96DpmkmcHOFocJ2w.jpg" alt="" />
<p id="sv">Survol boutons.</p>
<p id="bt1" class="bt">A</p>
<p id="bt2" class="bt">B</p>
<p id="bt3" class="bt">C</p>
<p id="bt4" class="bt">D</p>
<p id="bt5" class="bt">E</p>
<p id="bt6" class="bt">F</p>
<p id="bt7" class="bt">G</p>
<p id="bt8" class="bt">H</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>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
</div>

<style><!--
#fd{position:absolute; z-index:1; width:1100px; height:619px; transform:translate(0px,0px);}
#sv{position:absolute; z-index:2; width:450px; font-size:40px; color:green; text-shadow:2px 2px black; transform:translate(400px,30px);}
.bt{position:absolute; z-index:5; width:35px; height:50px; border-radius:10px; font-size:30px; border:1px solid black;text-align:center; line-height:50px; font-weight:bold; box-shadow:inset 3px 3px 5px black, inset -3px -3px 5px white; background:rgba(255,255,255,0.5);}
#bt1{transform:translate(1060px,50px);}
#bt2{transform:translate(1060px,120px);}
#bt3{transform:translate(1060px,190px);}
#bt4{transform:translate(1060px,260px);}
#bt5{transform:translate(1060px,330px);}
#bt6{transform:translate(1060px,400px);}
#bt7{transform:translate(1060px,470px);}
#bt8{transform:translate(1060px,540px);}
.mg{position:absolute; z-index:2; width:1100px; height:619px; background-size:1100px 619px; border:4px solid white; transition:all 1.2s;}
#mg1{box-sizing:border-box;width:1100px; height:0px; background:url('http://ekladata.com/v5UNJF3dbT7PWx74yDUC2T-Qqno.jpg'); background-position:0px -150px; transform:translate(0px,150px);}
#mg2{box-sizing:border-box;width:1100px; height:0px; background:url('http://ekladata.com/4UdpXJQKv767Z-c3AgL0vRsEebY.jpg'); background-position:0px -300px; transform:translate(0px,300px);}
#mg3{box-sizing:border-box;width:1100px; height:0px; background:url('http://ekladata.com/QBwl32oA58EvbYD7_vUMLFpDujY.jpg'); background-position:0px -450px; transform:translate(0px,450px);}
#mg4{box-sizing:border-box;width:0px; height:619px; background:url('http://ekladata.com/Lkvao4QBtS4j9MAxaUEJA0rjCp0.jpg'); background-position:-150px 0px; transform:translate(150px,0px);}
#mg5{box-sizing:border-box;width:0px; height:619px; background:url('http://ekladata.com/f--xH89uzJyDrM39ZQr3LpJkBx4.jpg'); background-position:-350px 0px; transform:translate(350px,0px);}
#mg6{box-sizing:border-box;width:0px; height:619px; background:url('http://ekladata.com/amcoGZ7DWy7bi_zqqKo40NIYV7w.jpg'); background-position:-550px 0px; transform:translate(550px,0px);}
#mg7{box-sizing:border-box;width:0px; height:619px; background:url('http://ekladata.com/tjaIW97cnBIBeWTp1gBeHgNd_GI.jpg'); background-position:-750px 0px; transform:translate(750px,0px);}
#mg8{box-sizing:border-box;width:0px; height:619px; background:url('http://ekladata.com/XRLMWNp-cmoU5obapEX9PSAPBbc.jpg'); background-position:-950px 0px; transform:translate(950px,0px);}
#bt1:hover ~ #mg1,#bt2:hover ~ #mg2,#bt3:hover ~ #mg3,#bt4:hover ~ #mg4,#bt5:hover ~ #mg5,#bt6:hover ~ #mg6,#bt7:hover ~ #mg7,#bt8:hover ~ #mg8{z-index:4; width:1100px; height:619px; background-size:1100px 619px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>