Clip-path

Vous connaissez le site très bien fait sur les clips: https://bennettfeely.com/clippy/

<div style="width: 900px; height: 506px; border: 1px solid black; margin: 5px auto; text-align: left;"><img id="clp0" class="clp" src="https://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /> <img id="clp1" class="clp" src="https://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /></div>

<style><!--
.clp{position:absolute; z-index:1; width:900px; height:506px;transition:all 1s linear;}
#clp0{ filter:grayscale(1); opacity:0.5;}
#clp1{clip-path: polygon(10% 10%,90% 10%, 90% 90%, 10% 90%);}
--></style> 

Le premier point de la sélection colorée et à 1O% du haut gauche de l'image en largeur et 10% en hauteur du même point.

Le second de la sélection colorée et à 9O% du haut gauche de l'image en largeur et 10% en hauteur du même point.

Le troisième point est à 90% de l'angle haut gauche en largeur et à 90% en hauteur du même point.

Le quatrième point point est à 10% de l'angle haut gauche et à 90% en hauteur de ce même point.

Chaque point  du code clip path comporte le point X et Y par rapport à l'angle haut de l'image.

En jouant sur les coordonnées de chaque point, vous pouvez faire varier la sélection:

<div style="width: 900px; height: 506px; border: 1px solid black; margin: 5px auto; text-align: left;"><img id="clpa0" class="clpa" src="https://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /> <img id="clpa1" class="clpa" src="https://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /></div>

<style><!--
.clpa{position:absolute; z-index:1; width:900px; height:506px;transition:all 1s linear;}
#clpa0{ filter:grayscale(1); opacity:0.5;}
#clpa1{clip-path: polygon(40% 10%,60% 10%, 90% 90%, 10% 90%);}

--></style>