Alterné

 7 images au ratio 16/9, en 1000x563px, à survoler.

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left; background: white; border: 1px solid black;"><img id="pl1" class="pl" src="http://ekladata.com/v4sNW0dAxVS9mQIB9F1VQ12FjFc.jpg" alt="" /><img id="pl2" class="pl" src="http://ekladata.com/H2yf7Ee5FcQ1Zae6rODjNJAtzDc.jpg" alt="" /><img id="pl3" class="pl" src="http://ekladata.com/3uLZPsKA9WPKZ5R6nS6yqMHh7so.jpg" alt="" /><img id="pl4" class="pl" src="http://ekladata.com/ynCiiwltFzdYd1tyojt4im1tDss.jpg" alt="" /><img id="pl5" class="pl" src="http://ekladata.com/ex_Z8NVW0VgcS_A_bJFsspiOoA0.jpg" alt="" /><img id="pl6" class="pl" src="http://ekladata.com/GGkenbeqVe9KVqKqeV-FnUzwXvA.jpg" alt="" /><img id="pl7" class="pl" src="http://ekladata.com/HBavqLVZ4OHQOrP2WEkyu3A0TjA.jpg" alt="" /></div>

<style><!--
.pl{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s, filter 0.5s 1s;}
#pl1{clip-path:polygon(0% 15%, 0% 15%, 15% 100%, 0% 100%);}
#pl2{clip-path:polygon(0% 0%, 15% 0%, 17% 100%, 0% 5%); filter:grayscale(1);}
#pl3{clip-path:polygon(17% 0%, 35% 0%, 40% 100%, 18.5% 100%);}
#pl4{clip-path:polygon(37% 0%, 62% 0%, 50% 100%, 42% 100%); filter:grayscale(1);}
#pl5{clip-path:polygon(64% 0%, 70% 0%, 80% 100%, 52% 100%);}
#pl6{clip-path:polygon(72% 0%, 85% 0%, 100% 100%, 82% 100%); filter:grayscale(1);}
#pl7{clip-path:polygon(87% 0%, 100% 0%, 100% 85%, 100% 85%);}
#pl1:hover,#pl2:hover,#pl3:hover,#pl4:hover,#pl5:hover,#pl6:hover,#pl7:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>