<div>
  <h1>CSS3 Filter</h1>
</div>
<div>
  <h1>CSS3 Background Blend Mode</h1>
</div>

html,
body {
  width: 100vw;
  height: 100vh;
}
div {
  width: 50vw;
  height: 100vh;
  float: left;
  background: hsl(335, 100%, 50%) url("https://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-4.jpg") no-repeat center;
  background-size: cover;
  
  &:nth-child(1){
    filter: grayscale(100%) sepia() saturate(5) hue-rotate(297deg) brightness(100%) saturate(150%) contrast(150%);
  }
  &:nth-child(2){
    background-blend-mode: luminosity;
  }
  
  h1 {
     margin: 0;
     text-align: center;
     padding: 20px;
     font-size: 2em;
     color: #fff;
     text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  }
}