07a.05.2024

 Même si le code précédent était simple, il est trop spécifique à la dimension du cadre ce qui oblige, si on souhaite modifier cette dimension, devoir modifier trop de valeurs.

Alors voici une autre écriture (en pourcentage) qui s'adaptera à vos dimensions et ratio.

Modifiez les dimensions surlignées en jaune et vous constaterez que le montage s'adapte... A vous de jouer !

<div style="width: 1000px; height: 563px; background: white; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 4px 4px 8px black;">
<p id="sec1" class="sec">&nbsp;</p>
<p id="sec2" class="sec">&nbsp;</p>
<p id="sec3" class="sec">&nbsp;</p>
<p id="sec4" class="sec">&nbsp;</p>
<p id="sec5" class="sec">&nbsp;</p>
<p id="sec6" class="sec">&nbsp;</p>
</div>
<style><!--
.sec{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s;}
#sec1{background:url('http://ekladata.com/Wne9d4rjy6RelArKF2src8js7G0.jpg'); background-size:1000px 563px; clip-path:polygon(0% 0%, 33% 0px,33% 49%,0% 49%);}
#sec2{background:url('http://ekladata.com/_wPpUBuqlHsRJWXYN3eSIxbacpQ.jpg'); background-size:1000px 563px; clip-path:polygon(34% 0%, 68% 0%, 68% 49%, 34% 49%);}
#sec3{background:url('http://ekladata.com/CpqY3pVxXg-NbEbvikoFiM-3fYE.jpg'); background-size:1000px 563px; clip-path:polygon(69% 0%,100% 0%, 100% 49%, 69% 49%);}
#sec4{background:url('http://ekladata.com/Rlstph2SqTIDTqMOtJjO88vQqr4.jpg'); background-size:1000px 563px; clip-path:polygon(0% 51%, 33% 51%, 33% 100%, 0% 100%);}
#sec5{background:url('http://ekladata.com/gsDIztgZJNDZMC8ylnQmIUJO6E0.jpg'); background-size:1000px 563px; clip-path:polygon(34% 51%, 68% 51%, 68% 100%, 34% 100%);}
#sec6{background:url('http://ekladata.com/fnyJtM41SORKXQmq1dWi5bU8wjg.jpg'); background-size:1000px 563px; clip-path:polygon(69% 51%, 100% 51%, 100% 100%, 69% 100%);}
#sec1:hover,#sec2:hover,#sec3:hover,#sec4:hover,#sec5:hover,#sec6:hover{z-index:5; clip-path:polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);}
--></style>