color filter for blog image on rollover

I managed to create the hover animation I want for my blog side-by-side grid images, but rather than greyscale I'm trying to figure out how to use this filter I found from this SVG Gradient map tool. I adjusted this filter called "x-ray" -- so I know I need to replace my current filter "greyscale" to "x-ray" -- but where/ how do I insert this filter preset for x-ray? 

Site: https://www.alliswellstudios.com/news

CURRENT CODE:

// blog image rollover
section.blog-image-wrapper{  transition: filter .2s ease-in-out;  filter: grayscale(100%);}
//transaction image block color: active
section.blog-image-wrapper:hover {  filter: grayscale(0%);
}

PRESET I'M TRYING TO FIGURE OUT HOW/ WHERE TO PLACE: 

<filter id="x-rays" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>
    <feComponentTransfer in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="1 0.42 0"/>
        <feFuncG type="table" tableValues="1 0.42 0"/>
        <feFuncB type="table" tableValues="1 0.92 1"/>
        <feFuncA type="table" tableValues="0 1"/>
      </feComponentTransfer>
    <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>
</filter>

Just want to say this is not simple thing. 

filter: grayscale is CSS code

But your desired code is HTML + CSS code, difficult to replicate this effect