Gray out a portion of an image

Question

How can you grey out a portion of an image? Like this

I was thinking about applying an svg with a grey image on top of the green image. There is a way to draw an image in svg, and a way to draw a segment path, but how would you enclose your image in a path? path {background: url()} doesnt work

So far i got to this:

<span class="hp"></span>

<svg width="300" height="300">       
    <path d="M25,25 L25,0A25,25 0 0,1 43.224215685535285,42.11367764821722 z"/>
</svg>

<style>
.hp {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-image: url(https://i.stack.imgur.com/suYdT.png)
}
svg {
    position: absolute;
    top: 0;
    left: 0;
}
path {
   background: url (https://i.stack.imgur.com/CWzfS.png)
}
</style>

fiddle

Answer 1

Overlay the clipped and grayed out image on top of the original one.

<svg width="0" height="0">
    <clipPath id="clipPolygon">
        <polygon points="0 55,25 25,25 0,0 0"></polygon>
    </clipPath>
</svg>

<div class="image-container">
    <img class="image-grey clip" src="https://i.stack.imgur.com/suYdT.png" />
    <img class="image-coloured" src="https://i.stack.imgur.com/suYdT.png" />
</div>

.image-coloured {
    z-index: 0;
    position: absolute;
}
.image-grey {
    z-index: 1;
    position: absolute;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray; /* For IE 6 - 9 */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.clip {
    /*Chrome,Safari*/
    -webkit-clip-path: polygon(0px 55px, 25px 25px, 25px 0px, 0px 0px);
    /*Firefox*/
    clip-path: url("#clipPolygon");
    /* iOS support inline encoded svg file*/
    -webkit-mask: url(data:image/svg+xml;
    charset=utf-8;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTAsNTUgTDI1LDI1IDI1LDAgMCwwIHoiLz4KICA8L2NsaXBQYXRoPgogIDxwYXRoIGlkPSJzdmdNYXNrIiBkPSJNMCw1NSBMMjUsMjUgMjUsMCAwLDAgeiIgIC8+Cjwvc3ZnPg==) no-repeat;
}

Got the code to gray out an image partially from here

Generated the polygon path from here

Got cross-browser grayscale filter from here

fiddle