Clip-path2

Survol étoiles. 4 images au ratio 16/9.

<div style="width: 900px; height: 506px; border: 1px solid black; margin: 5px auto; text-align: left;">
<img id="clip1" class="clip" src="http://ekladata.com/QOo2nGPrY1zruHUpkT9lqxtQvzc.jpg" alt="" />
<img id="clip0" class="clip" src="http://ekladata.com/QOo2nGPrY1zruHUpkT9lqxtQvzc.jpg" alt="" />
<img id="clip3" class="clip" src="http://ekladata.com/VUWl6XIaWvqlZTA3OJAvFnVhm0g.jpg" alt="" />
<img id="clip2" class="clip" src="http://ekladata.com/VUWl6XIaWvqlZTA3OJAvFnVhm0g.jpg" alt="" />
<img id="clip5" class="clip" src="http://ekladata.com/kYABWGTLj2GrgFMGpxyvZj38p2g.jpg" alt="" />
<img id="clip4" class="clip" src="http://ekladata.com/kYABWGTLj2GrgFMGpxyvZj38p2g.jpg" alt="" />
<img id="clip7" class="clip" src="http://ekladata.com/sp-ahKXyKzgTOS6F9Jm5sgTLu-g.jpg" alt="" />
<img id="clip6" class="clip" src="http://ekladata.com/sp-ahKXyKzgTOS6F9Jm5sgTLu-g.jpg" alt="" />
</div>
<style><!--
.clip{position:absolute; z-index:1; width:450px; height:253px;transition:all 1s linear;}
#clip0{z-index:1;filter:grayscale(1); opacity:0.5;transform:translate(0px,0px);}
#clip1{z-index:2; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);transform:translate(0px,0px);}
#clip2{z-index:1;filter:grayscale(1); opacity:0.5;transform:translate(450px,0px);}
#clip3{z-index:2; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);transform:translate(450px,0px);}
#clip4{z-index:1;filter:grayscale(1); opacity:0.5;transform:translate(450px,253px);}
#clip5{z-index:2; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);transform:translate(450px,253px);}
#clip6{z-index:1;filter:grayscale(1); opacity:0.5;transform:translate(0px,253px);}
#clip7{z-index:2; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);transform:translate(0px,253px);}
#clip1:hover,#clip3:hover,#clip5:hover,#clip7:hover{z-index:5; width:900px; height:506px; clip-path: polygon(50% 0%, 100% 0%, 100% 35%, 100% 57%, 100% 100%, 50% 100%, 0% 100%, 0% 57%, 0% 35%, 0% 0%); transform:translate(0px,0px);}
#clip1:hover~#clip0,#clip3:hover~#clip2,#clip5:hover~#clip4,#clip7:hover~#clip6{z-index:4; width:900px; height:506px; transform:translate(0px,0px);}
--></style>

Pour rendre sa forme de rectangle à l'image en étoile ou d'un autre motif, il faut repositionner chaque point du clip-path.

On peut simplifier le montage en supprimant les images de fond: clip0, clip2, clip4, clip7. ce qui laisse seulement les étoiles apparentes.