Jump to content

color filter for blog image on rollover

Recommended Posts

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>

Edited by AIW
Link to comment
  • Replies 1
  • Views 280
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.