Montage 295

Une autre façon de présenter des triangles en ligne, sur demande de Sylvie. 

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;"><img id="br1" class="br" src="http://ekladata.com/WAP6A5MxseN_ilKXyBq16sn48kE.jpg" alt="" /> <img id="br2" class="br" src="http://ekladata.com/2cbE_TPjh5cxHzlov3ZC4eZ4KYM.jpg" alt="" /> <img id="br3" class="br" src="http://ekladata.com/oQaXDFE0x0U7IzqKxjCTmU3IwyA.jpg" alt="" /> <img id="br4" class="br" src="http://ekladata.com/-0-vhTPwHApJqV06bl_xGN5eSWI.jpg" alt="" /> <img id="br5" class="br" src="http://ekladata.com/l6QdMN5vSlzbgsaols-2mBIpSVE.jpg" alt="" /> <img id="br6" class="br" src="http://ekladata.com/xufxy3VzUZQv6oGegcoFIfQLLes.jpg" alt="" /><p id="br7">Survol</p></div>
<style><!--
.br{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear;}
#br1{clip-path:polygon(0% 10%, 40% 50%, 40% 50%, 0% 90%); -webkit-clip-path:polygon(0% 10%, 40% 50%, 40% 50%, 0% 90%);}

#br2{clip-path:polygon(15% 15%, 45% 50%, 45% 50%, 15% 85%);-webkit-clip-path:polygon(15% 15%, 45% 50%, 45% 50%, 15% 85%);}

#br3{clip-path:polygon(30% 20%, 50% 50%, 50% 50%, 30% 80%);-webkit-clip-path:polygon(30% 20%, 50% 50%, 50% 50%, 30% 80%);}

#br4{clip-path:polygon(60% 50%, 100% 10%, 100% 90%, 60% 50%);-webkit-clip-path:polygon(60% 50%, 100% 10%, 100% 90%, 60% 50%);}

#br5{clip-path:polygon(55% 50%, 85% 15%, 85% 85%, 55% 50%);-webkit-clip-path:polygon(55% 50%, 85% 15%, 85% 85%, 55% 50%);webkit-}

#br6{clip-path:polygon(50% 50%, 70% 20%, 70% 80%, 50% 50%);webkit-clip-path:polygon(50% 50%, 70% 20%, 70% 80%, 50% 50%);}

#br7{position:absolute; z-index:1; width:100px; font-size:30px; transform:translate(400px,100px);}
#br1:hover,#br2:hover,#br3:hover,#br4:hover,#br5:hover,#br6:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit- clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);filter:grayscale(0);}

--></style>