CSS Hover 上圖像的徑向效應

Question

我想實現這種效果：當我 hover 在圖像上時，我想在指針指向的 div 中的灰度圖像上以徑向形狀應用顏色

附上你可以找到想要的結果和我目前擁有的！ 我還包含了代碼，以防您需要邏輯

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

我已經創建了一支筆，請在此處查看 - https://codepen.io/nirmalsinghoo7/pen/RwBxWGg您可以在此處生成所需的徑向漸變 - https://cssgradient.io

這是代碼 -

<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 在 hover -

謝謝