Exemple 228a

 1+8 images au ratio 16/9

L'animation est plus douce mais ajouter une bordure n'est pas simple.

Survol

<div style="width: 1000px; height: 563px; margin: 5px auto; border: 4px ridge white; background: url('http://ekladata.com/tJo5J57F68uoNkywhCDG32XJiQI.jpg'); background-size: 1000px 563px; text-align: left;">
<p id="chda0">Survol</p>
<img id="chda1" class="chda" src="http://ekladata.com/bj2huilX85UJeC7QMrQWZ1I7Lcw.jpg" alt="" /> <img id="chda2" class="chda" src="http://ekladata.com/ZPFGu7lwLM_oHD9OKizdwsxrMvk.jpg" alt="" /> <img id="chda3" class="chda" src="http://ekladata.com/T7gxOmKm-GvqnTfLfjPC0X-oZxM.jpg" alt="" /> <img id="chda4" class="chda" src="http://ekladata.com/4cmopfqe4r2-WWS4FxplKhudCgg.jpg" alt="" /> <img id="chda5" class="chda" src="http://ekladata.com/IXrpmKkk-cFAFvNKju_EFWplt04.jpg" alt="" /> <img id="chda6" class="chda" src="http://ekladata.com/z2cgc2jFv8LdfwaVzueGdLiu0RE.jpg" alt="" /> <img id="chda7" class="chda" src="http://ekladata.com/VW52Dv3055o0U6I_htUOZCD5Mt0.jpg" alt="" /> <img id="chda8" class="chda" src="http://ekladata.com/41pFMc7T8j1-TNFSmF0nPyrffnc.jpg" alt="" /></div>
<style><!--
#chda0{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black;transform:translate(10px,10px);}
.chda{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
#chda1{clip-path:polygon(100px 100px,250px 100px, 300px 150px, 150px 150px);}
#chda2{clip-path:polygon(100px 200px,250px 200px, 300px 250px, 150px 250px);}
#chda3{clip-path:polygon(100px 300px,250px 300px, 300px 350px, 150px 350px);}
#chda4{clip-path:polygon(100px 400px,250px 400px, 300px 450px, 150px 450px);}
#chda5{clip-path:polygon(700px 100px,850px 100px, 900px 150px, 750px 150px);}
#chda6{clip-path:polygon(700px 200px,850px 200px, 900px 250px, 750px 250px);}
#chda7{clip-path:polygon(700px 300px,850px 300px, 900px 350px, 750px 350px);}
#chda8{clip-path:polygon(700px 400px,850px 400px, 900px 450px, 750px 450px);}
#chda1:hover,#chda2:hover,#chda3:hover,#chda4:hover,#chda5:hover,#chda6:hover,#chda7:hover,#chda8:hover{z-index:5; clip-path:polygon(0px 0px,1000px 0px, 1000px 563px, 0px 563px);}
--></style>