SVG Filters Gray -> Non-linear Color

index.html

<svg class="defs-only">
  <filter id="greyscale">
    <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>
  <filter id="gamma-red" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
     <feComponentTransfer>
      <feFuncR type="gamma" exponent="0.5" />
      <feFuncG type="gamma" exponent="1.1" />
      <feFuncB type="gamma" exponent="1.4" />
	    </feComponentTransfer>
  </filter>
</svg>
<a class="profile-link" href="#" title="Project image">
  <img class="profile-pic" src="http://ibin.co/24Poc26HuCfC"/></a>
<a class="profile-link" href="#" title="That's me">
  <img class="profile-pic" src="https://da.gravatar.com/userimage/8169311/8aaaa4cdfaebd1d458c05dfb417165a6.png?size=200"/></a>

style.css

.profile-link {
  display: inline-block;
  padding: 1em;
  width: 10em;
  max-width: 80%;
  
   transition: filter 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s;
}
.profile-link:hover, 
.profile-link:focus {
  -webkit-filter: url(#gamma-red);
  filter:  url(#gamma-red);
}
.profile-pic {
  width: 100%;
  height: auto;
  box-shadow: #222 0.2em 0.2em 1em;
  
  transition: box-shadow 0.3s;
  -webkit-transition: box-shadow 0.3s;
}
.profile-link:hover .profile-pic, 
.profile-link:focus .profile-pic {
  
   -webkit-filter: url(#greyscale);
  filter:  url(#greyscale);
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}
.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}

SVG Filters Gray -> Non-linear Color.markdown

SVG Filters Gray -> Non-linear Color

Using SVG filters to turn a grayscale image into a multi-toned image with pure whites and blacks but colored mid-tones. Not sure if there is a name for this in traditional graphic printing.

If you un-comment the section of CSS, the color becomes a hover effect.

See the Fun with Color Filters collection for more.

Forked from Amelia Bellamy-Royds's Pen CSS Filters Gray -> Color.

Forked from Amelia Bellamy-Royds's Pen CSS Filters Gray -> Color.

A Pen by Jon Ege Ronnenberg on CodePen.

License.