Triangles

 Pour assurer un bon recouvrement des images agrandies, j'ai agrandi celles colorées du haut à 51% et celles colorées du bas à 49%. 

Ne pas oublier, dans ce type de codes, que le programme doit, dans l'écriture du code, d'abord voir l'élément cliqué ou survolé avant de voir celui animé.

Survol parties colorées.

<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>