CSS Radial Effect on Image on Hover

Question

I would like to achieve this effect: When I hover over an image I would like to apply color in a radial shape on a grayscaled image in a div where the pointer points at

Attached you can find the wanted result and what I currently have! I also included the code in case you need the logic

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{

}

Answer 1

I have created a pen, please check it here - https://codepen.io/nirmalsinghoo7/pen/RwBxWGg You can generate your required Radial Gradient here - https://cssgradient.io

Here is the code -

<div>
<img src="http://i415.photobucket.com/albums/pp236/Keefers_/Keffers%20Animals/evilmonkey.jpg" />

div{
  position: relative;
  width: 450px;
  height: 350px;
  z-index: 9;
}
img{
  width: 100%;
  height: 100%;
      /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .8s ease-in-out;  
}
div:hover:before{
content:"";
  z-index: 99;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: radial-gradient(circle, rgba(0,233,113,0.5746673669467788) 0%, rgba(136,136,136,1) 100%);
}

Output on hover -

Thanks