<div id="container">	
  <div id="mix-blend-mode" class="group">
			<div class="col"><h2>Output:</h2>
        <p id="test"><img src="https://lenadesign.org/wp-content/uploads/2019/12/avatar.jpg"></p></div>
			<div class="col"><h2>mix-blend-mode:</h2><div class="btn-group">
<button class="button" onclick="functionMultiply()">MULTIPLY</button>

<button class="button" onclick="functionScreen()">SCREEN</button>

<button class="button" onclick="functionOverlay()">OVERLAY</button>

<button class="button" onclick="functionDarken()">DARKEN</button>

<button class="button" onclick="functionLighten()">LIGHTEN</button>

<button class="button" onclick="colorDodge()">COLOR-DODGE</button>

<button class="button" onclick="colorBurn()">COLOR-BURN</button>

<button class="button" onclick="functionDifference()">DIFFERENCE</button>

<button class="button" onclick="functionExclusion()">EXCLUSION</button>

<button class="button" onclick="functionHue()">HUE</button>

<button class="button" onclick="functionSaturation()">SATURATION</button>
        
<button class="button" onclick="functionColor()">COLOR</button>
        
<button class="button" onclick="functionLuminosity()">LUMINOSITY</button>
        
<button class="button" onclick="functionNone()">NORMAL</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: 5px auto; }
#container > div { margin: 0 0 10px 0; min-width: 500px; width: 100%; }

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

.group { display: inline-block; }

#mix-blend-mode {
			position: relative; 
			background-color: #0a9396; 
			z-index: 1; 
			width: 100%; 
		}
#mix-blend-mode .col { 
			position: relative; 
			width: 27%; 
			padding: 3%; 
			float: left; 
		}
#mix-blend-mode .col:nth-child(1) { left: 33%; }
#mix-blend-mode .col:nth-child(2) { left: -33.3%; }
#mix-blend-mode .col:nth-child(3) { left: 0; }
#mix-blend-mode:before, #cmix-blend-mode:after {
		   content: "";
		   position: absolute;
		   z-index: -1;
		   top: 0;
		   left: 33.4%;
		   width: 33.4%;
		   height: 100%;
		   background-color: #94d2bd;
		}
#mix-blend-mode: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: 5px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin: 2px 1px;
  cursor: pointer;
  width:100%;
}

.btn-group button:hover {
  background-color: #e9d8a6;
  color: #353535; 
}

#test {
  text-align: center;  
}

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

function functionMultiply() {
  document.getElementById("test").style.mixBlendMode = "multiply";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: multiply;") {
    x.innerHTML = "mix-blend-mode: multiply;";
  } else {
    x.innerHTML = "mix-blend-mode: multiply;";
  }
}

function functionScreen() {
  document.getElementById("test").style.mixBlendMode = "screen";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: screen;") {
    x.innerHTML = "mix-blend-mode: screen;";
  } else {
    x.innerHTML = "mix-blend-mode: screen;";
  }
}

function functionOverlay() {
  document.getElementById("test").style.mixBlendMode = "overlay";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: overlay;") {
    x.innerHTML = "mix-blend-mode: overlay;";
  } else {
    x.innerHTML = "mix-blend-mode: overlay;";
  }
}

function functionDarken() {
  document.getElementById("test").style.mixBlendMode = "darken";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: darken;") {
    x.innerHTML = "mix-blend-mode: darken;";
  } else {
    x.innerHTML = "mix-blend-mode: darken;";
  }
}

function functionLighten() {
  document.getElementById("test").style.mixBlendMode = "lighten";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: lighten;") {
    x.innerHTML = "mix-blend-mode: lighten;";
  } else {
    x.innerHTML = "mix-blend-mode: lighten;";
  }
}

function colorDodge() {
  document.getElementById("test").style.mixBlendMode = "color-dodge";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: color-dodge;") {
    x.innerHTML = "mix-blend-mode: color-dodge;";
  } else {
    x.innerHTML = "mix-blend-mode: color-dodge;";
  }
}

function colorBurn() {
  document.getElementById("test").style.mixBlendMode = "color-burn";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: color-burn;") {
    x.innerHTML = "mix-blend-mode: color-burn;";
  } else {
    x.innerHTML = "mix-blend-mode: color-burn;";
  }
}

function functionDifference() {
  document.getElementById("test").style.mixBlendMode = "difference";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: difference;") {
    x.innerHTML = "mix-blend-mode: difference;";
  } else {
    x.innerHTML = "mix-blend-mode: difference;";
  }
}

function functionExclusion() {
  document.getElementById("test").style.mixBlendMode = "exclusion";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: exclusion;") {
    x.innerHTML = "mix-blend-mode: exclusion;";
  } else {
    x.innerHTML = "mix-blend-mode: exclusion;";
  }
}

function functionHue() {
  document.getElementById("test").style.mixBlendMode = "hue";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: hue;") {
    x.innerHTML = "mix-blend-mode: hue;";
  } else {
    x.innerHTML = "mix-blend-mode: hue;";
  }
}

function functionSaturation() {
  document.getElementById("test").style.mixBlendMode = "saturation";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: saturation;") {
    x.innerHTML = "mix-blend-mode: saturation;";
  } else {
    x.innerHTML = "mix-blend-mode: saturation;";
  }
}

function functionColor() {
  document.getElementById("test").style.mixBlendMode = "color";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: color;") {
    x.innerHTML = "mix-blend-mode: color;";
  } else {
    x.innerHTML = "mix-blend-mode: color;";
  }
}

function functionLuminosity() {
  document.getElementById("test").style.mixBlendMode = "luminosity";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: luminosity;") {
    x.innerHTML = "mix-blend-mode: luminosity;";
  } else {
    x.innerHTML = "mix-blend-mode: luminosity;";
  }
}

function functionNone() {
  document.getElementById("test").style.mixBlendMode = "normal";  
  var x = document.getElementById("code");
  if (x.innerHTML === "mix-blend-mode: normal;") {
    x.innerHTML = "mix-blend-mode: normal;";
  } else {
    x.innerHTML = "mix-blend-mode: normal;";
  }
}