👀 Views: 31 💬 Answers: 1 📅 Created: 2025-08-21

next.js css svg javascript

I'm having a hard time understanding I've looked through the documentation and I'm still confused about I'm experiencing an scenario with the Next.js Image component when trying to set a custom SVG as a background image... On hover, I want to change the opacity of the SVG background but it doesn't seem to apply properly. Here’s a simplified version of my component: ```jsx import Image from 'next/image'; import styles from './MyComponent.module.css'; const MyComponent = () => { return ( <div className={styles.container}> <Image src='/path/to/image.svg' alt='My SVG Image' layout='fill' objectFit='cover' className={styles.image} /> </div> ); }; export default MyComponent; ``` And the corresponding CSS: ```css .container { position: relative; width: 300px; height: 300px; overflow: hidden; } .image { transition: opacity 0.3s; } .container:hover .image { opacity: 0.5; } ``` When I hover over the container, the opacity doesn't change as expected—it's like the hover effect is ignored. I've tried adjusting the z-index and ensuring there are no conflicting styles, but nothing seems to work. Additionally, I've checked if the SVG has any inherent properties or animations that might be overriding this effect, but no luck there either. I'm using Next.js version 12.3.1 and React 17.0.2. Any ideas on what might be going wrong or how I can fix this? This is part of a larger CLI tool I'm building. How would you solve this? I'm working with Javascript in a Docker container on Debian. I'm working in a Windows 11 environment. I'd be grateful for any help.