Montage 294

Selon une idée de Sylvie. Survol de chaque triangle.

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;">
<img id="sv1" class="sv" src="http://ekladata.com/ia1a8upB5uiIJrpmJHHY-fHP-7A.jpg" alt="" />
<img id="sv2" class="sv" src="http://ekladata.com/ilfxZEIpt26lumP0KVJl3J1FwqA.jpg" alt="" />
<img id="sv3" class="sv" src="http://ekladata.com/Ba8kK3dwwMX8smP3RdBq32yc2pQ.jpg" alt="" />
<img id="sv4" class="sv" src="http://ekladata.com/OOLFslThTPDDeCzBu-CmKdliKio.jpg" alt="" />
<img id="sv5" class="sv" src="http://ekladata.com/jeBRRfth49KO8iWns9-FPyGi69I.jpg" alt="" />
<p id="sv6">Survol</p>
</div>

<style><!--
.sv{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear;}
#sv1{clip-path:polygon(5% 80%, 20% 20%, 20% 20%, 35% 80%); -webkit-clip-path:polygon(5% 80%, 20% 20%, 20% 20%, 35% 80%);}

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

#sv3{clip-path:polygon(35% 80%, 50% 20%, 50% 20%, 65% 80%);-webkit-clip-path:polygon(35% 80%, 50% 20%, 50% 20%, 65% 80%);}

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

#sv5{clip-path:polygon(65% 80%, 80% 20%, 80% 20%, 95% 80%);-webkit-clip-path:polygon(65% 80%, 80% 20%, 80% 20%, 95% 80%);}

#sv6{position:absolute; z-index:1; width:100px; font-size:20px; transform:translate(400px,10px);}
#sv1:hover,#sv2:hover,#sv3:hover,#sv4:hover,#sv5:hover{z-index:5; clip-path:polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%); -webkit-clip-path:polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%); filter:grayscale(0);}

--></style>