$cmy : "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/CMYK_separation_%E2%80%93_no_black.jpg/268px-CMYK_separation_%E2%80%93_no_black.jpg";
$cmyk : "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/CMYK_separation_%E2%80%93_maximum_black.jpg/201px-CMYK_separation_%E2%80%93_maximum_black.jpg";

body {
  margin: 1rem 0;
  background: #111;
}

.cmy {
  background:
    url($cmy) top left,
    url($cmy) center center,
    url($cmy) bottom right;
  height: 200px;
  
  &:hover {
    background-position:
      top center,
      center center,
      bottom center;
  }
}

.cmyk {
  background:
    url($cmyk) top left,
    url($cmyk) 402px 303px,
    url($cmyk) 201px -150px,
    url($cmyk) bottom right;
  background-size: 25% 400%;
  height: 150px;
    
  &:hover {
    background-position:
      top center,
      center 303px,
      center -150px,
      bottom center;
  }
}

.cmy, .cmyk {
  margin: .25rem auto;
  width: 804px;
  background-blend-mode: multiply;
  background-color: white;
  background-repeat: repeat-y;
  transition: .25s .5s;
  border-radius: .25rem;
  
  
  &:hover {
    transition: 1.5s 0;
  }
}