<div id="wrapper">
  
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_1280.jpg" width="545px" height="545px" id="my-image">
  </div>
  
  <div class="button-container">
    
    <button class="btn" id="invert">Invert Image </button> <br>
    <button class="btn" id="hue"> Hue Rotate </button> <br>
    
    <button class="btn" id="reset"> Reset</button>
    
    
    
  </div>
  
  
</div>
#wrapper{
  width: 750px;
  height: 600px;
  background-color:#4FEFD2;
  display: flex;
  justify-content: space-around;
}

.image-container{
  width: 550px;
  height: 550px;
  background-color: #A9F5E7;
  margin: 5px;
}

.button-container{
  width: 200px;
  height: 550px;
  background-color: #B0F5E9;
  margin: 5px;
}

.btn{
  padding: 15px;
  margin: 20px;
  border-radius: 5px;
  font-family: system-ui;
  background-color: #5DEAD2;  
  font-size: 125%;
  color: #355FF8;
}

.btn:hover{
  opacity: 0.7;
  box-shadow: 3px 5px 3px #43E0CD;
}

.invert{
  animation: inversion 15s;
  
}

.hue{
  animation: huerotate 15s;
  
}



@keyframes inversion{
  from{
    filter: invert(0%);
    
  }
  to{
    filter: invert(100%);
    
  }
}

@keyframes huerotate{
  from{
    filter: hue-rotate(0deg);
    
  }
  to{
    filter: hue-rotate(135deg);
  }
}
let myImage = document.getElementById('my-image');

let invert = document.getElementById('invert');

let hue = document.getElementById('hue');

let reset = document.getElementById('reset');


// Event Listeners
invert.addEventListener('click', invertImage);

hue.addEventListener('click', changeHue);

reset.addEventListener('click', initial);


//Functions 

function invertImage(){
  myImage.className = 'invert'
  
}

function changeHue(){
  myImage.className = 'hue';
  
}

function initial(){
  myImage.className = '';
}





External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.