带跳转链接的图片鼠标悬停切换效果实现及问题求助

大家好，我最近在做个人网页时遇到了一个小问题，想请各位帮忙看看：我页面上有几个带有跳转链接的图片，想要实现鼠标悬停时自动切换图片的效果，但试了好几种写法都没成功，折腾了好一会儿还是没头绪，来求助啦！

我尝试过的CSS悬停方案 #

我一开始用背景图的方式实现了悬停切换，代码是这样的：

img { 
  width: 280px 
} 
/* 悬停切换图片的样式尝试 */ 
#picture { 
  display: block; 
  width: 200px; 
  height: 200px; 
  background-image: url(https://media.tenor.com/WueJYqDbbO0AAAAj/noodle-gorillaz-noodle.gif); 
  border: none; 
  text-decoration: none; 
  background-repeat: no-repeat; 
} 
#picture:hover { 
  background-image: url(https://media.tenor.com/O9wx4k1Hkb4AAAAj/noodle-gorillaz.gif); 
  background-repeat: no-repeat; 
}

对应的HTML结构是：

<a href="https://b-hephard.neocities.org/Agu" id="picture" onclick="return false;"></a>

这个背景图的方式能实现悬停切换，但没法直接适配到我实际的<img>元素上。

我实际需要处理的图片结构 #

这是我页面上真实存在的、需要实现悬停切换的带跳转图片：

<!-- Oli的跳转图片 -->
<a href="https://b-hephard.neocities.org/Oli">
  <img src="https://i.imgur.com/8BfmB1Q.png" alt="oli">
</a>
<!-- Agu的跳转图片 -->
<a href="https://b-hephard.neocities.org/Agu">
  <img src="https://i.imgur.com/gcKCwuC.png" alt="agu">
</a>

我试过的调试操作 #

我尝试过调整代码顺序，添加或移除id、img src、alt这些属性，也试过把onclick="return false;"加到链接里，但就是没法让这两个图片实现悬停切换的效果。

我的需求 #

想请教各位：怎么才能给这两个带跳转链接的<img>元素实现鼠标悬停时切换图片的效果？希望能保留正常的跳转功能，不管是用纯CSS还是少量JavaScript的方案都可以！

内容来源于stack exchange