<div class="container">
  <img class="image js-image" src="https://1.bp.blogspot.com/-tjaIZz4z-gg/X5OcRPbzntI/AAAAAAABb7g/XPtjTsC5mj4ZfgYgRCSG1Y4aeP9XGyRxACNcBGAsYHQ/s786/dog_shetland_sheepdog_blue_merle.png">
  <div class="buttons js-buttons"></div>
</div>
.container {
  display: flex;
  align-items: strech;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image {
  width: 300px;
  &.is-blur {
    filter: blur(5px);
  }
  &.is-brightness {
    filter: brightness(0.4);
  }
  &.is-contrast {
    filter: contrast(200%);
  }
  &.is-drop-shadow {
    filter: drop-shadow(16px 16px 20px #000);
  }
  &.is-grayscale {
    filter: grayscale(50%);
  }
  &.is-hue-rotate {
    filter: hue-rotate(90deg);
  }
  &.is-invert {
    filter: invert(75%);
  }
  &.is-opacity {
    filter: opacity(25%);
  }
  &.is-saturate {
    filter: saturate(30%);
  }
  &.is-sepia {
    filter: sepia(60%);
  }
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
View Compiled
const imageEl = document.querySelector(".js-image");
const buttonWrapperEl = document.querySelector(".js-buttons");

const filterList = [
  "blur",
  "brightness",
  "contrast",
  "drop-shadow",
  "grayscale",
  "hue-rotate",
  "invert",
  "opacity",
  "saturate",
  "sepia",
];

const removeFilter = () => {
  filterList.forEach((filter) => {
    imageEl.classList.remove(`is-${filter}`);
  });
};

const setFilter = (filterName) => {
  return () => {
    removeFilter();
    imageEl.classList.add(`is-${filterName}`);
  };
};

filterList.forEach((filter) => {
  const buttonEl = document.createElement("button");
  const text = document.createTextNode(filter);
  buttonEl.appendChild(text);
  buttonEl.addEventListener("click", setFilter(filter), false);
  buttonWrapperEl.appendChild(buttonEl);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.