How to change something when a button is clicked [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed yesterday.
Improve this question
I am was making a slider, but I can’t get it to have an animation when a person clicks a button to move to the other image. How can I fix it?
The HTML code:
<h2>client showcase</h2>
<br />
<img src="images here.jpeg" />
<br />
<img src="left.jpg" alt="previous client" />
<img src="right.jpg" alt="next client" />
The CSS code:
.slider2 .change{ border-radius: 5px; width: 300px; height: 300px; transition: opacity 1s; }
I have tried many ways, but I can’t get a proper animation. I have tried adding classes, but it does not work properly.

Answer 1

I solved this by adding a class to the image when a button is clicked so the image will move, change, change colours, fade, rotate and many more
CSS
.slider2 .change{
border-radius: 5px;
width: 500px;
height: 300px;
}
.small{
font-size: xx-small;
color: #a8a0a0;
}
.slider2 .change2{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change3{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change4{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2{
position: relative;
top: 0;
left: 0;
position: relative;
width: 50%;
}
.change{
opacity: 1;
position: relative;
top: 0;
left: 0;
border: 1px solid #000000;
transition: 0.3s;
}
.change2{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
transition: opacity 0.3s;
}
.change3{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.change4{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.ninja{
opacity: 0;
}
.hidden{
opacity: 0;
}
.hide{
animation: move 400ms ;
}
.show{
opacity: 1;
}
.slided{
animation: slide 400ms;
}
#keyframes move{
from{opacity: 100%;}
to{opacity: 0%;}
}
#keyframes slide{
from{
transform: translateX(0px);
}
to{
transform: translateX(-500px);
}
}