<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 = '';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.