<section class="hero">
    <div class="hero-content">
      <h1><code>normal</code> Blend Mode</h1>

      <div class="control-btn">
        <button id="prev">Prev</button>
        <button id="next">Next</button>
      </div>
    </div>
  </section>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.hero{
  background-image: url('https://unsplash.com/photos/UUsQk_9bdR8/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MXx8fGVufDB8fHx8MTY5Mzc4NjU5NHw&force=true');
  background-size: cover;
  color: white;
  min-height: 100vh;
  width: 100%;
}

.hero-content{
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 100%
}

h1{
  font-size: 10vw;
  color: rgb(125, 139, 2);
  background-color: #056842;
  padding: 1rem;
  mix-blend-mode: normal;
}

code{
  background-color: #023622;
  padding: .5rem;
}

.control-btn{
  display: flex;
  justify-content: space-between;
  padding: 4px;
  width: 50vw;
  text-align: center;
  margin: 0 auto;
}

.control-btn button{
  border-radius: 50px;
  padding: 8px 13px;
  font-size: 20px;
  font-weight: bolder;
  border: 1px solid black;
  box-shadow: 2px 2px 3px;
  background-color: white;
  cursor: pointer;
}

.control-btn button:hover{
  box-shadow: 1px 1px 1px;
}
const blend_modes = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
];
let nextBtn = document.getElementById("next");
let prevBtn = document.getElementById("prev");
let content = document.querySelector("code");
let heading = document.querySelector("h1");

heading.style.mixBlendMode = content.innerText


nextBtn.addEventListener("click", () => {
  let currIndex = blend_modes.indexOf(content.innerText);

  if(currIndex < blend_modes.length - 1){
    content.innerText = blend_modes[currIndex + 1];
    
    heading.style.mixBlendMode = content.innerText

  }else{
    content.innerText = blend_modes[0];
    heading.style.mixBlendMode = content.innerText
  }
});

prevBtn.addEventListener("click", () => {
  let currIndex = blend_modes.indexOf(content.innerText);

  if(currIndex > 0){
    content.innerText = blend_modes[currIndex - 1]
    heading.style.mixBlendMode = content.innerText
  }else{
    content.innerText = blend_modes[blend_modes.length - 1]
    heading.style.mixBlendMode = content.innerText
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.