How to change an image src on hover?

[DiogoM14]

Hey folks. I want to change an image on hover. I've already tried with onMouseEnter and then change a state but it was kinda slow. Do you guys know any good way to do that?

Thank you!

This is my code right now:
<Image src={product_image[0]} h={"400px"} w={"full"} borderRadius={"sm"} alt="Clothes" objectFit={"cover"} _hover={{ transform: "scale(1.03)", }} transition={"0.2s ease-in-out"} />

[ghost]

Hello,

I was able to figure out a solution :)
Click here to view on CodeSandbox or view the code below

export default function DynamicImage() {
  const image1 = 'url("ts.png")';
  const image2 = 'url("jss.png")';

  const [image, setImage] = useState(image1);

  return (
    <Image
      style={{ content: image }}
      onMouseEnter={() => setImage(image2)}
      onMouseOut={() => setImage(image1)}
      width={200}
    />
  );

You can modify my example to include your desired transition styling.

[shakti177]

Can You please All as a Transition in this on hover?