A grayscale & multiplied image that fades to full color on hover

image-filter.html

<!-- html -->
<figure class="multiply-image lead-1 ns-lead-0">
  <img class="multiply-image-source" src="{{section.settings.about_image | img_url: '900x' }}" alt="{{section.settings.about_caption}}">
  <img class="multiply-image-copy" src="{{section.settings.about_image | img_url: '900x' }}" alt="{{section.settings.about_caption}}">
  <caption class="txt-gray multiply">{{section.settings.about_caption}}</caption>
</figure>

<!-- css -->

.multiply-image {
  display: block;
  position: relative;
  &:hover {
    .multiply-image-copy  {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
}

.multiply-image-source {
  mix-blend-mode: multiply;
  filter: grayscale(100%);
  opacity: 0.99;
}

.multiply-image-copy {
  mix-blend-mode: normal !important;
  filter: grayscale(0%);
  position: absolute;
  top: 0;
  left: 0%;
  opacity: 0;
  transition: opacity 300ms ease-in-out
}