<div id="container">	
  <div id="cssfilters" class="group">
			<div class="col"><h2>Output:</h2>
        <p id="test"><img src="https://i1.wp.com/lenadesign.org/wp-content/uploads/2020/08/makeup.png?ssl=1&resize=320%2C320"></p></div>
			<div class="col"><h2>CSS Filters:</h2><div class="btn-group">
<button class="button" onclick="functionGrayscale()">GRAYSCALE</button>

<button class="button" onclick="functionBlur()">BLUR</button>

<button class="button" onclick="functionBrightness()">BRIGHTNESS</button>

<button class="button" onclick="functionContrast()">CONTRAST</button>

<button class="button" onclick="functionDropShadow()">DROP-SHADOW</button>

<button class="button" onclick="functionHueRotate()">HUE-ROTATE</button>

<button class="button" onclick="functionInvert()">INVERT</button>

<button class="button" onclick="functionOpacity()">OPACITY</button>

<button class="button" onclick="functionSaturate()">SATURATE</button>

<button class="button" onclick="functionSepia()">SEPIA</button>

<button class="button" onclick="functionNone()">NONE</button>
</div></div>
			<div class="col"><h2>CSS Code:</h2><p id="code">CSS Code.</p></div>
		</div>
</div>

body {
  background-color: #eaf4f4;
}

#container { width: 50%; margin: 10px auto; }
#container > div { margin: 0 0 15px 0; min-width: 500px; width: 100%; }

.group:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: "";
     clear: both;
     height: 0;
     }

.group { display: inline-block; }

#cssfilters {
			position: relative; 
			background-color: #a4c3b2; 
			z-index: 1; 
			width: 100%; 
		}
		#cssfilters .col { 
			position: relative; 
			width: 27%; 
			padding: 3%; 
			float: left; 
		}
		#cssfilters .col:nth-child(1) { left: 33%; }
		#cssfilters .col:nth-child(2) { left: -33.3%; }
		#cssfilters .col:nth-child(3) { left: 0; }
		#cssfilters:before, #cssfilters:after {
		   content: "";
		   position: absolute;
		   z-index: -1;
		   top: 0;
		   left: 33.4%;
		   width: 33.4%;
		   height: 100%;
		   background-color: #cce3de;
		}
		#cssfilters:after {
		   left: 66.667%;
		   background-color: #a4c3b2;
		}

#code {
  font-weight: bold;
  font-size:15px;
  width: 100%;
}

h2, #code {
  font-family: arial;
  text-align: center;  
}

.btn-group button {
  background-color: #353535; 
  border: none;
  color: white;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  margin: 2px 1px;
  cursor: pointer;
  width:100%;
}

.btn-group button:hover {
  background-color: #3c6e71;
}

#test {
  text-align: center;  
}

.col img {
  margin-top: 0;
  vertical-align: middle;
  width: 60%;
}

function functionGrayscale() {
  document.getElementById("test").style.filter = "grayscale(100%)";  
  var x = document.getElementById("code");
  if (x.innerHTML === "filter: grayscale(100%);") {
    x.innerHTML = "filter: grayscale(100%);";
  } else {
    x.innerHTML = "filter: grayscale(100%);";
  }
}

function functionBlur() {
  document.getElementById("test").style.filter = "blur(2px)";
  var x = document.getElementById("code");
  if (x.innerHTML === "filter:blur(2px);") {
    x.innerHTML = "filter: blur(2px);";
  } else {
    x.innerHTML = "filter: blur(2px);";
  }
}

function functionBrightness() {
  document.getElementById("test").style.filter = "brightness(200%)";
  var x = document.getElementById("code");
  if (x.innerHTML === "filter: brightness(200%);") {
    x.innerHTML = "filter: brightness(200%);";
  } else {
    x.innerHTML = "filter: brightness(200%);";
  }
}

function functionContrast() {
  document.getElementById("test").style.filter = "contrast(200%)";
  var x = document.getElementById("code");
  if (x.innerHTML === "filter: contrast(200%);") {
    x.innerHTML = "filter: contrast(200%);";
  } else {
    x.innerHTML = "filter: contrast(200%);";
  }
}

function functionDropShadow() {
  document.getElementById("test").style.filter = "drop-shadow(4px 4px 5px gray)";
  var x = document.getElementById("code");
  if (x.innerHTML === "filter: drop-shadow(4px 4px 5px gray);") {
    x.innerHTML = "filter: drop-shadow(4px 4px 5px gray);";
  } else {
    x.innerHTML = "filter: drop-shadow(4px 4px 5px gray);";
  }
}

function functionHueRotate() {
  document.getElementById("test").style.filter = "hue-rotate(90deg)";
  var x = document.getElementById("code");
  if (x.innerHTML === "filter: hue-rotate(90deg);") {
    x.innerHTML = "filter: hue-rotate(90deg);";
  } else {
    x.innerHTML = "filter: hue-rotate(90deg);";
  }
}

function functionInvert() {
  document.getElementById("test").style.filter = "invert(100%)";
 var x = document.getElementById("code");
  if (x.innerHTML === "filter: invert(100%);") {
    x.innerHTML = "filter: invert(100%);";
  } else {
    x.innerHTML = "filter: invert(100%);";
  }
}

function functionOpacity() {
  document.getElementById("test").style.filter = "opacity(25%)";
 var x = document.getElementById("code");
  if (x.innerHTML === "filter: opacity(25%);") {
    x.innerHTML = "filter: opacity(25%);";
  } else {
    x.innerHTML = "filter: opacity(25%);";
  }
}

function functionSaturate() {
  document.getElementById("test").style.filter = "saturate(7)";
 var x = document.getElementById("code");
  if (x.innerHTML === "filter: saturate(7);") {
    x.innerHTML = "filter: saturate(7);";
  } else {
    x.innerHTML = "filter: saturate(7);";
  }
}

function functionSepia() {
  document.getElementById("test").style.filter = "sepia(100%)";
 var x = document.getElementById("code");
  if (x.innerHTML === "filter: sepia(100%);") {
    x.innerHTML = "filter: sepia(100%);";
  } else {
    x.innerHTML = "filter: sepia(100%);";
  }
}

function functionNone() {
  document.getElementById("test").style.filter = "none";
 var x = document.getElementById("code");
  if (x.innerHTML === "filter: none;") {
    x.innerHTML = "filter: none;";
  } else {
    x.innerHTML = "filter: none;";
  }
}