In my current project, I am utilizing React along with HTML, CSS, and Material UI. One of the tasks I am working on is toggling a color overlay on an image when it is clicked.
Here is the snippet of JavaScript code I have implemented:
const About = ({imgState, setImgState}) => {
const imgTracker = () => {
if(imgState === true){
setImgState(false);
}
else if(imgState===false){
setImgState(true);
}
}
...
<Box
className={imgState ? 'AboutImg active' : 'AboutImg notactive'}
component="img"
alt="face"
src={img2}
onClick={imgTracker}
/>
Additionally, here is the corresponding CSS markup:
.MidSectionTop{
.MidSectionTopText{
}
.MidSectionImage{
.AboutImg{
height: calc(100vh * 4/12);
width: calc(100vw * 2/12);
&.active{
background: rgba(0, 197, 165, 0.5);
}
&.notactive{
background: none;
}
}
}
}
My current issue lies in the fact that the image overlays on top of the background color applied. I attempted to use z-index with the '&.active' class, but it did not yield the desired result. Any guidance or suggestions would be greatly appreciated! Please let me know if there is any additional information I can provide to help troubleshoot this problem further.