How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click https://i.sstatic.net/wBVCL.png
After Click https://i.sstatic.net/Z9ut5.png
This is my code:
<ActiveLink activeClassName="bg" href="/about">
<li className="nav-item box-icon">
<a className="nav-link">
<img src="/assets/img/green.png" className="icon-size" />
</a>
<span>Graduate </span>
</li>
</ActiveLink>
Here's my CSS:
.box-icon {
width: 200px;
height: 150px;
background-color: aqua;
text-align: center;
padding-top: 10px;
font-family: "Poppins";
font-size: 20px;
}
.icon-size {
widows: 53px;
height: 60px;
margin-top: 25px;
}
.bg {
content: url("../public/assets/img/white/white.png");
background-color: #0fa49e;
widows: 53px;
height: 150px;
color: #fff;
font-family: "Poppins";
font-size: 20px;
}