17.04.2024

 8 images au ratio 16/9 dans un montage en 1000x562px + bordure.

Survol de chaque partie colorée.

<div style="width: 1000px; height: 562px; margin: 50px auto; text-align: left; border: 4px solid white; background: white; box-shadow:4px 4px 8px black;">
<p id="col1" class="col">&nbsp;</p>
<p id="col2" class="col">&nbsp;</p>
<p id="col3" class="col">&nbsp;</p>
<p id="col4" class="col">&nbsp;</p>
<p id="col5" class="col">&nbsp;</p>
<p id="col6" class="col">&nbsp;</p>
<p id="col7" class="col">&nbsp;</p>
<p id="col8" class="col">&nbsp;</p>
<p id="gris1" class="gris">&nbsp;</p>
<p id="gris2" class="gris">&nbsp;</p>
<p id="gris3" class="gris">&nbsp;</p>
<p id="gris4" class="gris">&nbsp;</p>
<p id="gris5" class="gris">&nbsp;</p>
<p id="gris6" class="gris">&nbsp;</p>
<p id="gris7" class="gris">&nbsp;</p>
<p id="gris8" class="gris">&nbsp;</p>
</div>

<style><!--
.col{position:absolute; z-index:1; width:500px; height:562px; transform:translate(0px,0px); opacity:0.8; transition:all 1s;}
.gris{position:absolute; z-index:1; width:500px; height:562px; transform:translate(500px,0px); opacity:0.2; filter:grayscale(1); transition:all 1s;}
#col1, #gris1{clip-path:polygon(0% 0%,48% 0%, 48% 46%,48% 46%); background:url('http://ekladata.com/Bps2O_Ddm8VahB0OaIp09qDyhAM.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col2, #gris2{clip-path:polygon(52% 0%,100% 0%, 52% 46%,52% 46%); background:url('http://ekladata.com/YFzUs-EC5MQ7M8JIf5fHaxD7tSA.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col3, #gris3{clip-path:polygon(56% 48%,100% 5%, 100% 48%,56% 48%); background:url('http://ekladata.com/D5wLcz3N23u2x5-9OTIftWfn25s.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col4, #gris4{clip-path:polygon(56% 52%,100% 52%, 100% 95%,56% 52%); background:url('http://ekladata.com/LwKFkEXqk1Lv6g6vx8ZItJrYCME.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col5, #gris5{clip-path:polygon(52% 52%,100% 100%, 100% 100%,52% 100%); background:url('http://ekladata.com/3ui0ULAIa9XrL7cDcRZufoSfjPQ.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col6, #gris6{clip-path:polygon(48% 52%, 48% 100%,48% 100%,0% 100%); background:url('http://ekladata.com/RiJrpZag8rdCKkQ4Fuxm9zGqQOA.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col7, #gris7{clip-path:polygon(0% 52%,44% 52%, 44% 52%,0% 95%); background:url('http://ekladata.com/Mrf12JiKayjjJmbE_ZwYqoZTpJc.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#col8, #gris8{clip-path:polygon(0% 5%,0% 5%, 44% 48%,0% 48%); background:url('http://ekladata.com/idB2LtzjN7EogsXDc-173i9Iu4Q.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#gris1,#gris2,#gris3,#gris4,#gris5,#gris6,#gris7,#gris8{background-position:-500px 0px;}
#col1:hover,#col2:hover,#col3:hover,#col4:hover,#col5:hover,#col6:hover,#col7:hover,#col8:hover{z-index:5; clip-path:polygon(0% 0%,100% 0%, 100% 100%,0% 100%);opacity:1;}
#col1:hover ~ #gris1,#col2:hover ~ #gris2,#col3:hover ~ #gris3,#col4:hover ~ #gris4,#col5:hover ~ #gris5,#col6:hover ~ #gris6,#col7:hover ~ #gris7,#col8:hover ~ #gris8{z-index:5; clip-path:polygon(0% 0%,100% 0%, 100% 100%,0% 100%); filter:grayscale(0); opacity:1;}
--></style>