Переход фильтра оттенков серого не работает при попутном ветре ⇐ CSS

[Anonymous]

У меня есть изображения карточек, и я пытаюсь сделать так, чтобы при наведении курсора на изображение оно менялось с черно-белого на цветное.
Я пробовал много способов, но не могу. заставить его работать, я не знаю, что это может быть, если у кого-нибудь есть идеи, это будет очень полезно, большое спасибо!

Код: Выделить всё

    const WatchFilm = ({ movie }) => {

const [isGrayscale, setIsGrayscale] = useState(true);
const genreName =
movie.genres.length > 0 ? movie.genres[0].name : "Sin Género";

const animationVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: { opacity: 1, scale: 1 },
};

useEffect(() => {
setIsGrayscale(true); // Inicialmente, la imagen se muestra en grayscale
}, [
movie.cover, // Dependencia para el efecto de grayscale

]);

return (

[img]{movie.cover}
onMouseEnter={() => setIsGrayscale(false)} // Quitar grayscale al pasar el ratón
onMouseLeave={() => setIsGrayscale(true)} // Volver a poner grayscale al salir el ratón
/>



{genreName}

);
};`

Подробнее здесь: https://stackoverflow.com/questions/790 ... n-tailwind