👀 Views: 430 💬 Answers: 1 📅 Created: 2025-06-10

next.js css svg javascript

Can someone help me understand I'm experiencing an scenario with the Next.js `Image` component where SVG images with CSS transitions are not animating correctly on hover. I have a simple SVG icon that I want to scale up slightly when hovered over, but instead, it appears to glitch and doesn't apply the transition smoothly. Here is the code I’m using to implement the image: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src='/icon.svg' alt='Icon' width={50} height={50} className='transition-transform duration-300 hover:scale-110' /> </div> ); }; export default MyComponent; ``` I’m using Next.js version 12.0.1 and Tailwind CSS for styling. When I hover over the image, it doesn't scale up as expected. Instead, it jumps without any animation, and the transition does not seem to take effect at all. I tried wrapping the `Image` component in a `div` and applying the hover effect to the `div` instead, like this: ```javascript <div className='transition-transform duration-300 hover:scale-110'> <Image src='/icon.svg' alt='Icon' width={50} height={50} /> </div> ``` But this caused the image to be cut off when scaling, losing the smooth transition effect. I also checked if the SVG itself has any properties that might conflict with CSS transitions, but that doesn't seem to be the case. When I inspect the element, it appears that the `transform` properties are not being applied correctly. Could anyone guide to understand why the SVG transition isn’t functioning as intended with the Next.js Image component? Is there a better approach for handling SVG animations in this context? Thanks in advance! My development environment is macOS. Could someone point me to the right documentation?