I am looking to create a unique effect where upon hovering over an image, color will be applied in a radial shape on a grayscaled image within a div that is pointed by the cursorhttps://i.sstatic.net/64RJv.jpg
Below you can see the desired outcome compared to what I currently have. The code snippet is also included for reference
import university from "../../assets/svgs/university.svg";
import scholarship from "../../assets/svgs/scholarship.svg";
import contactus from "../../assets/svgs/contactus.svg";
import NavigationCard from "./NavigationCard";
import classes from "./NavigationCard.module.css";
import classroom from "../../assets/images/class_hall.jpg";
const Navigation = (props) => {
return (
<div className={classes['navigation-container']}>
<div className={classes['navigation-inner-container']}>
<div className={classes["background-image"]}>
<img src={classroom} alt="classroom" />
</div>
<div className={classes["cards-container"]}>
<NavigationCard
svg={university}
navText="Universities"
></NavigationCard>
<NavigationCard
svg={scholarship}
navText="Scholarship"
></NavigationCard>
<NavigationCard svg={contactus} navText="Contact Us"></NavigationCard>
</div>
<div className={classes['black-cover']}></div>
</div>
</div>
);
};
export default Navigation;
CSS
.navigation-inner-container {
height: 30vh;
border-radius: 10px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.background-image {
width: 100%;
height: 30vh;
position: absolute;
background: black;
border-radius: 10px;
}
.background-image img {
width: 100%;
height: 30vh;
filter: grayscale(100%);
border-radius: 10px;
object-fit: cover;
opacity: 0.3;
}
.background-image img:hover{
}