29.05.2024

Montage en 1200px par 675px (16/9). Survol des 4 images. 

Désolé pour la longueur du code (chaque image est divisée en 5 parties + un bouton) mais vous n'avez que les 4 adresses images à modifier.

On pourrait raccourcir le code mais il serait moins compréhensible.

<div style="width: 1200px; height: 675px; margin: 50px auto; box-shadow:6px 6px 8px black;">
<p id="prem">&nbsp;</p>
<p id="prem1" class="un">&nbsp;</p>
<p id="prem2" class="un">&nbsp;</p>
<p id="prem3" class="un">&nbsp;</p>
<p id="prem4" class="un">&nbsp;</p>
<p id="prem5" class="un">&nbsp;</p>
<p id="sec">&nbsp;</p>
<p id="sec1" class="deux">&nbsp;</p>
<p id="sec2" class="deux">&nbsp;</p>
<p id="sec3" class="deux">&nbsp;</p>
<p id="sec4" class="deux">&nbsp;</p>
<p id="sec5" class="deux">&nbsp;</p>
<p id="tri">&nbsp;</p>
<p id="tri1" class="trois">&nbsp;</p>
<p id="tri2" class="trois">&nbsp;</p>
<p id="tri3" class="trois">&nbsp;</p>
<p id="tri4" class="trois">&nbsp;</p>
<p id="tri5" class="trois">&nbsp;</p>
<p id="quat">&nbsp;</p>
<p id="quat1" class="quatre">&nbsp;</p>
<p id="quat2" class="quatre">&nbsp;</p>
<p id="quat3" class="quatre">&nbsp;</p>
<p id="quat4" class="quatre">&nbsp;</p>
<p id="quat5" class="quatre">&nbsp;</p>
</div>
<style><!--
#prem{position:absolute; z-index:10; width:600px; height:337px;transform:translate(0px,0px);}
.un{position:absolute; z-index:5; width:1200px; height:675px; border:4px solid white; transform-origin:top left; background:url('http://ekladata.com/5m7u5ad-WBMT20G0FgvSBD8Z4IQ.jpg'); background-size:1200px 675px; transition:all 1.5s;}
#prem1{box-sizing:border-box; transform:translate(0px,0px) scale(0.5);}
#prem2{box-sizing:border-box; transform:translate(0px,0px) scale(0.4);}
#prem3{box-sizing:border-box; transform:translate(0px,0px) scale(0.3);}
#prem4{box-sizing:border-box; transform:translate(0px,0px) scale(0.2);}
#prem5{box-sizing:border-box; transform:translate(0px,0px) scale(0.1);}
#prem:hover ~ #prem1,#prem:hover ~ #prem2,#prem:hover ~ #prem3,#prem:hover ~ #prem4,#prem:hover ~ #prem5{z-index:9;transform:translate(0px,0px) scale(1);}
#sec{position:absolute; z-index:10; width:600px; height:337px;transform:translate(600px,0px);}
.deux{position:absolute; z-index:5; width:1200px; height:675px; border:4px solid white; transform-origin:top right; background:url('http://ekladata.com/e2wSb9xtI5HV6qVRQPHNw37n8D0.jpg'); background-size:1200px 675px; transition:all 1.5s;}
#sec1{box-sizing:border-box; transform:translate(0px,0px) scale(0.5);}
#sec2{box-sizing:border-box; transform:translate(0px,0px) scale(0.4);}
#sec3{box-sizing:border-box; transform:translate(0px,0px) scale(0.3);}
#sec4{box-sizing:border-box; transform:translate(0px,0px) scale(0.2);}
#sec5{box-sizing:border-box; transform:translate(0px,0px) scale(0.1);}
#sec:hover ~ #sec1,#sec:hover ~ #sec2,#sec:hover ~ #sec3,#sec:hover ~ #sec4,#sec:hover ~ #sec5{z-index:9;transform:translate(0px,0px) scale(1);}
#tri{position:absolute; z-index:10; width:600px; height:337px;transform:translate(600px,338px);}
.trois{position:absolute; z-index:5; width:1200px; height:675px; border:4px solid white; transform-origin:bottom right; background:url('http://ekladata.com/3q5pjeofa2n1jssDc1SweLJdwrk.jpg'); background-size:1200px 675px; transition:all 1.5s;}
#tri1{box-sizing:border-box; transform:translate(0px,0px) scale(0.5);}
#tri2{box-sizing:border-box; transform:translate(0px,0px) scale(0.4);}
#tri3{box-sizing:border-box; transform:translate(0px,0px) scale(0.3);}
#tri4{box-sizing:border-box; transform:translate(0px,0px) scale(0.2);}
#tri5{box-sizing:border-box; transform:translate(0px,0px) scale(0.1);}
#tri:hover ~ #tri1,#tri:hover ~ #tri2,#tri:hover ~ #tri3,#tri:hover ~ #tri4,#tri:hover ~ #tri5{z-index:9;transform:translate(0px,0px) scale(1);}
#quat{position:absolute; z-index:10; width:600px; height:337px;transform:translate(0px,338px);}
.quatre{position:absolute; z-index:5; width:1200px; height:675px; border:4px solid white; transform-origin:bottom left; background:url('http://ekladata.com/OO3clvpO2Pfd88MjAeouZkpWGKI.jpg'); background-size:1200px 675px; transition:all 1.5s;}
#quat1{box-sizing:border-box; transform:translate(0px,0px) scale(0.5);}
#quat2{box-sizing:border-box; transform:translate(0px,0px) scale(0.4);}
#quat3{box-sizing:border-box; transform:translate(0px,0px) scale(0.3);}
#quat4{box-sizing:border-box; transform:translate(0px,0px) scale(0.2);}
#quat5{box-sizing:border-box; transform:translate(0px,0px) scale(0.1);}
#quat:hover ~ #quat1,#quat:hover ~ #quat2,#quat:hover ~ #quat3,#quat:hover ~ #quat4,#quat:hover ~ #quat5{z-index:9;transform:translate(0px,0px) scale(1);}
--></style>