CMYK Image Effect

by kthornbloom

HTML

<div class="cmyk-wrap">
  <div class="k"><img src="https://picsum.photos/300/300?image=910" alt=""></div>  
  <div class="y"><img src="https://picsum.photos/300/300?image=910" alt=""></div>  
  <div class="m"><img src="https://picsum.photos/300/300?image=910" alt=""></div>  
  <div class="c"><img src="https://picsum.photos/300/300?image=910" alt=""></div>
</div>

SCSS

body {
  padding:30px;
  text-align:center;
  background:#000;
}
.cmyk-wrap {
  width:300px;
  height:300px;
  display:inline-block;
  position:relative;
  div {
    position: absolute;;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    overflow:hidden;
    transition:3s cubic-bezier(0.22, 0.61, 0.36, 1);
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.c {
   mix-blend-mode:multiply;
  &:before {
    background:cyan;
    mix-blend-mode:screen;
  }
}

.m {
  mix-blend-mode:multiply;
  &:before {
    background:magenta;
    mix-blend-mode:screen;
  }
}

.y {
  mix-blend-mode:multiply;
  &:before {
    background:yellow;
    mix-blend-mode:screen;
  }
}

.k {
  &:before {
    background:black;
    mix-blend-mode:color;
  }
  &:after {
    content:'';
    background:rgba(255,255,255,.5);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
}

.cmyk-wrap:hover {
  .c{transform:translate(75px, 75px) scale(.5)}
  .m{transform:translate(75px, -75px) scale(.5)}
  .y{transform:translate(-75px, 75px) scale(.5)}
  .k{transform:translate(-75px, -75px) scale(.5)}
}