Next.js Image Component Not Applying CSS Filters on Hover Events
I'm refactoring my project and I'm confused about I'm experimenting with I keep running into I've searched everywhere and can't find a clear answer... Quick question that's been bugging me - I'm working with an scenario with the Next.js Image component where CSS filters aren't being applied on hover events as expected. I've set up a simple component that should apply a grayscale filter when the user hovers over the image, but it doesn't seem to work. Here’s the relevant part of my code: ```jsx import Image from 'next/image'; import styles from './Image.module.css'; const MyImageComponent = () => { return ( <div className={styles.imageWrapper}> <Image src="/path/to/image.jpg" alt="Sample Image" layout="responsive" width={600} height={400} className={styles.image} /> </div> ); }; export default MyImageComponent; ``` And my CSS in `Image.module.css` looks like this: ```css .imageWrapper { overflow: hidden; } .image { transition: filter 0.3s ease; } .imageWrapper:hover .image { filter: grayscale(100%); } ``` I’ve ensured that the `overflow: hidden` style is applied correctly to the wrapper, and I can see the transition effect when inspecting the styles in the dev tools, but the image remains in color when I hover over it. I've tried using different browsers, clearing the cache, and simplifying the styles, but nothing seems to work. The Next.js version I'm using is 13.1.0, and I’m running it in development mode. Is there a known scenario with the Next.js Image component and CSS transitions, or am I missing something in my implementation? I'm working on a CLI tool that needs to handle this. Thanks in advance! Is there a better approach? This is happening in both development and production on Ubuntu 20.04. Has anyone else encountered this? For reference, this is a production CLI tool.