11.10.2024

6 images en 16/9, montage en 1200x675px.

Pour assurer un bon recouvrement des images agrandies, j'ai modifié celles du haut en 51% et celles du bas en 49%.
le code:

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;"><img id="ph1a" class="ph" src="http://ekladata.com/nmDaB3ix4yRYMy-Qpmg7-WyM3Jk.jpg" alt="" /> <img id="ph1b" class="ph" src="http://ekladata.com/nmDaB3ix4yRYMy-Qpmg7-WyM3Jk.jpg" alt="" /> <img id="ph2a" class="ph" src="http://ekladata.com/gtIHbjAEJObHTohGEorT90hGjd0.jpg" alt="" /> <img id="ph2b" class="ph" src="http://ekladata.com/gtIHbjAEJObHTohGEorT90hGjd0.jpg" alt="" /> <img id="ph3a" class="ph" src="http://ekladata.com/sMaJ0J-uyyyBEEeWS_20BAyBizA.jpg" alt="" /> <img id="ph3b" class="ph" src="http://ekladata.com/sMaJ0J-uyyyBEEeWS_20BAyBizA.jpg" alt="" /> <img id="ph4a" class="ph" src="http://ekladata.com/g1QewJTFJKl550FrPm67d-qPVxk.jpg" alt="" /> <img id="ph4b" class="ph" src="http://ekladata.com/g1QewJTFJKl550FrPm67d-qPVxk.jpg" alt="" /> <img id="ph5a" class="ph" src="http://ekladata.com/jcQyCl_uw7l6i1eXfEcSXl1U6Gw.jpg" alt="" /> <img id="ph5b" class="ph" src="http://ekladata.com/jcQyCl_uw7l6i1eXfEcSXl1U6Gw.jpg" alt="" /> <img id="ph6a" class="ph" src="http://ekladata.com/0wPZ9jVH-NSwgoq_JDEfQAt3ntM.jpg" alt="" /> <img id="ph6b" class="ph" src="http://ekladata.com/0wPZ9jVH-NSwgoq_JDEfQAt3ntM.jpg" alt="" />

<p id="conc">Survol parties color&eacute;es.</p>

</div>

<style><!--

#conc{position:absolute; z-index:1; width:120px; text-align:center; font-size:25px; transform:translate(0px,280px);} 

.ph{position:absolute; z-index:1; width:1200px; height:675px; transition:all 1s;}

#ph1a{clip-path:polygon(0% 0%, 28% 0%, 14% 49%, 14% 49%);}

#ph1b{clip-path:polygon(74% 51%, 100% 51%, 88% 100%, 88% 100%); filter:grayscale(1);}

#ph2a{clip-path:polygon(32% 0%, 57% 0%, 43% 49%, 43% 49%);}

#ph2b{clip-path:polygon(45% 51%, 70% 51%, 59% 100%, 59% 100%); filter:grayscale(1);}

#ph3a{clip-path:polygon(61% 0%, 86% 0%, 72% 49%, 72% 49%);}

#ph3b{clip-path:polygon(16% 51%, 41% 51%, 27% 100%, 27% 100%); filter:grayscale(1);}

#ph4a{clip-path:polygon(14% 51%, 14% 51%, 25% 100%, 0% 100%);}

#ph4b{clip-path:polygon(88% 0%, 88% 0%, 100% 49%, 74% 49%); filter:grayscale(1);}

#ph5a{clip-path:polygon(43% 51%, 43% 51%, 57% 100%, 29% 100%);}

#ph5b{clip-path:polygon(59% 0%, 59% 0%, 70% 49%, 45% 49%); filter:grayscale(1);}

#ph6a{clip-path:polygon(72% 51%, 72% 51%, 86% 100%, 61% 100%);}

#ph6b{clip-path:polygon(30% 0%, 30% 0%, 41% 49%, 16% 49%); filter:grayscale(1);}

#ph1a:hover,#ph2a:hover,#ph3a:hover{clip-path:polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%); z-index:5;}

#ph1a:hover ~ #ph1b,#ph2a:hover ~ #ph2b,#ph3a:hover ~ #ph3b{clip-path:polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); z-index:5; filter:grayscale(0);}

#ph4a:hover,#ph5a:hover,#ph6a:hover{clip-path:polygon(0% 49%, 100% 49%, 100% 100%, 0% 100%); z-index:5;}

#ph4a:hover ~ #ph4b,#ph5a:hover ~ #ph5b,#ph6a:hover ~ #ph6b{clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); z-index:5; filter:grayscale(0);}

--></style>

Survol parties colorées.