灰度滤镜过渡在顺风中不起作用

Question

我有卡片图像，我正在尝试制作它，以便当我将鼠标悬停在图像上时，它会从黑白变为彩色。 我已经尝试了很多方法，但我似乎无法让它发挥作用，我不知道它可能是什么，如果有人有任何想法，那将是一个很大的帮助，非常感谢！

    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 (
<motion.div
  className="relative cursor-pointer bg-blue-700 rounded-lg overflow-hidden transition-all duration-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 w-64 mx-2 my-12 transform hover:scale-110"
  initial="hidden"
  animate="visible"
  variants={animationVariants}
  transition={{ duration: 0.5 }}
>
  <img
    className={`h-96 w-full object-cover transition-transform duration-300 hover:scale-105 ${
      isGrayscale ? "filter filter-grayscale-100" : "grayscale"
    }`}
    src={movie.cover}
    alt={movie.title}
    onMouseEnter={() => setIsGrayscale(false)} // Quitar grayscale al pasar el ratón
    onMouseLeave={() => setIsGrayscale(true)} // Volver a poner grayscale al salir el ratón
  />
  <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-25 transition-opacity duration-300 hover:opacity-100" />
  <div className="absolute bottom-0 left-0 w-full bg-black bg-opacity-60 p-2 text-white text-center transition-all duration-500">
    <h2 className="text-md sm:text-lg font-light font-afacadFlux">
      {genreName}
    </h2>
  </div>
</motion.div>

）； };`

Answer 1

1. 我认为你不需要使用状态来控制颜色过渡。您可以选择将类

   grayscale hover:grayscale-0

   应用到您的图像，如文档此处所示。
2. 我还从代码中删除了

   <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-25 transition-opacity duration-300 hover:opacity-100" />

   ，因为它似乎会影响灰度到颜色的过渡。

这是最终的代码

const WatchFilm = ({ movie }) => {
  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 },
  };

  return (
    <motion.div
      className="relative cursor-pointer bg-blue-700 rounded-lg overflow-hidden transition-all duration-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 w-64 mx-2 my-12 transform hover:scale-110"
      initial="hidden"
      animate="visible"
      variants={animationVariants}
      transition={{ duration: 0.5 }}
    >
       <img
        className={"h-96 w-full object-cover transition-transform duration-300 hover:scale-105 filter grayscale hover:grayscale-0"}
        src={movie.cover}
        alt={movie.title}
      />
      <div className="absolute bottom-0 left-0 w-full bg-black bg-opacity-60 p-2 text-white text-center transition-all duration-500">
        <h2 className="text-md sm:text-lg font-light font-afacadFlux">
          {genreName}
        </h2>
      </div>
    </motion.div>
  );
};