Cross-browser CSS image filters

Cross-browser CSS image filters.markdown

Cross-browser CSS image filters

A Pen by Elvis on CodePen.

License.

index.html

<div class="uk-container uk-container-center">
  <div class="uk-grid uk-grid-small" data-uk-grid-margin>
    <div class="uk-width-small-1-4">
      <div class="uk-thumbnail">
        <img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg">
        <div class="uk-thumbnail-caption">Firefox, Chrome, Safari, IE6-9</div>
      </div>
    </div>
    <div class="uk-width-small-1-4">
      <div class="uk-thumbnail">
        <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="100%" height="100%">
          <defs>
            <filter id="filtersPicture">
              <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
              <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
            </filter>
          </defs>
          <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
        </svg>
        <div class="uk-thumbnail-caption">IE10 with inline SVG</div>
      </div>
    </div>
    <div class="uk-width-small-1-4">
      <div class="uk-thumbnail">
        <div class="half-grayscale-container"><img class="half-grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"></div>
        <div class="uk-thumbnail-caption">Partial Grayscale - Firefox, Chrome, Safari, IE6-9</div>
      </div>
    </div>
    <div class="uk-width-small-1-4">
      <div class="uk-thumbnail">
        <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="100%" height="100%">
          <defs>
            <filter id="filtersPictureTwo">
              <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
              <feColorMatrix id="filter_38" type="saturate" values="0.5" data-filterid="38" />
            </filter>
          </defs>
          <image filter="url(&quot;#filtersPictureTwo&quot;)" x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
        </svg>
      <div class="uk-thumbnail-caption">Partial Grayscale - IE10 with inline SVG</div>
      </div>
    </div>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/js/uikit.min.js"></script>

style.css

body {
    padding: 1em;
}
img.grayscale {
    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"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
    background-size: contain;
}
svg image {
    transition: all .6s ease;
}
svg image:hover {
    opacity: 0;
}
div.half-grayscale-container {
    background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg) no-repeat; /* IE6-9 */
}
img.half-grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray alpha(opacity=50); /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.half-grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}
.uk-grid > div > div > .uk-thumbnail-caption {
    font-size: 12px;
    line-height: 16px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.min.css" rel="stylesheet" />