#filter
  .image
    .image-layer.b
    .image-layer.g
    .image-layer.r

.filter-buttons
  %a{ href: '#', class: 'set-filter', id:'no-filter' } -
  %a{ href: '#', class: 'set-filter', id:'b1' } B1 
  %a{ href: '#', class: 'set-filter', id:'b5' } B5
  %a{ href: '#', class: 'set-filter', id:'c1' } C1
  %a{ href: '#', class: 'set-filter', id:'f2' } F2
  %a{ href: '#', class: 'set-filter', id:'g3' } G3
  %a{ href: '#', class: 'set-filter', id:'p5' } P5 
  %a{ href: '#', class: 'set-filter', id:'t1' } T1
View Compiled
@import 'https://fonts.googleapis.com/css?family=Montserrat';

body
  font-family 'Montserrat', sans-serif;
  
.image
  height 100vh
  width 100vw
  position relative
  filter saturate(0.8) brightness(1.3) contrast(0.9)
  
.image-layer
  position absolute
  top 0
  right 0 
  left 0 
  bottom 6em
  background:url('https://outfit-v2-exports-production.s3-ap-southeast-2.amazonaws.com/media_library_items/4c3cabfbb816708aa05445f26917dc44/cat-variation-one_large.jpg') center center no-repeat
  background-size cover
  background-blend-mode screen
  mix-blend-mode multiply
  
.r 
  background-color #FF0000
.g 
  background-color #00FF00
.b 
  background-color #0000FF
  
.p5 .image { filter: contrast(1.1); }
.p5 .b { background-color: rgb(76, 54, 255); }
.p5 .g { background-color: rgb(73, 250, 79); }
.p5 .r { background-color: rgb(193, 96, 122);}
  
.b1 .image { filter: saturate(0.1) brightness(1.5) contrast(0.85) grayscale(100%)}
  
.b5 .image { filter: saturate(0.1) brightness(1.3) contrast(1) grayscale(100%)}

.c1 .image { filter: saturate(1) brightness(1.1) contrast(1.1) grayscale(0)}
.c1 .b { background-color: rgb(4, 52, 255); }
.c1 .g { background-color: rgb(129, 249, 47); }
.c1 .r { background-color: rgb(254, 90, 111); }
  
.f2 .image { filter: saturate(1) brightness(1) contrast(1.05) grayscale(0)}
.f2 .b { background-color: rgb(4, 55, 255); }
.f2 .g { background-color: rgb(121, 249, 30); }
.f2 .r { background-color: rgb(254, 97, 84); }

.g3 .image { filter: saturate(0.8) brightness(1.1) contrast(1.15) grayscale(0)}
.g3 .b { background-color: rgb(6, 51, 255); }
.g3 .g { background-color: rgb(110, 249, 67); }
.g3 .r { background-color: rgb(254, 66, 26); }
  
.t1 .image { filter: saturate(1) brightness(1.15) contrast(0.75) grayscale(0)}
.t1 .b { background-color: rgb(6, 51, 255); }
.t1 .g { background-color: rgb(110, 249, 67); }
.t1 .r { background-color: rgb(254, 66, 26); }
  
.filter-buttons
  position absolute 
  z-index 100
  bottom 0
  background #333;
  left 0 
  right 0
  height 6em
  display flex;
  justify-content space-around
  align-items center
  
.set-filter
  align-items center
  text-align center
  line-height: 5rem
  display inline-block
  color white
  font-size 1.5em
  text-decoration none
  background tomato
  height 5rem
  width 11%
  transition all 0.1s ease
  transform-origin 50% 100%
  &.active.active
    background #111
  &[id="no-filter"] { background: #aaa }  
  &[id="b1"] { background: #D64025 }
  &[id="b5"] { background: #D65625 }
  &[id="c1"] { background: #D66E25 }
  &[id="f2"] { background: #FFC93F }
  &[id="g3"] { background: #CB9E2C }
  &[id="p5"] { background: #4A90E2 }
  &[id="t1"] { background: #9CC8FA }
$('.set-filter').on('click', function(){
  $("#filter").attr('class', '');
  $('#filter').addClass(this.id);
  $('.set-filter').removeClass('active');
  $(this).addClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js