• 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="http://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /> <img id="clp1" class="clp" src="http://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="http://ekladata.com/EmuR4guPqf2GxfN3Uo8WA00PVtQ.jpg" alt="" /> <img id="clpa1" class="clpa" src="http://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>