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



// 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%);


<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"/>
    <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>

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

Top Posters In This Topic

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.