마우스를 올리면 색상이 다시 바뀌는 CSS를 사용하여 회색조 이미지를 어떻게 만들 수 있나요?

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#grayscale)" ... />
</svg></code>