Html 使用其他悬停效果将图像从灰度更改为彩色

我在这一页上有三幅图像：

这是一个wordpress网站，使用WP Bakery插件进行设计布局

它设置为将彩色图像更改为灰度，然后在鼠标悬停时将其恢复为彩色。我使用了这个css：

#team .ult-new-ib img{
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
}

#team .ult-new-ib img:hover {
  -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
   transition: all 0.5s ease;
}

这是可行的，但后来我选择了另一个横幅元素，当你将鼠标悬停在图片上时，它会带来一个标题。我认为这会影响图像切换为颜色的方式，因为当我在浏览器的“检查”区域中为实际图像激活悬停状态时，它仍然会更改为颜色。文本覆盖的某些内容正在干扰或可能影响链接。我不认为它是链接，因为中间的图像没有链接，它仍然没有转换为颜色

有谁能帮我做这件事，使文字覆盖仍然工作，图像的颜色变化

以下是HTML：

<div class="ult-new-ib ult-ib-effect-style5 bw ult-ib-resp  " data-min-width="768" data-max-width="900" style="background: rgb(0, 0, 0); opacity: 1;" data-opacity="1" data-hover-opacity="1">

    <img class="ult-new-ib-img" style="opacity:1;" alt="null" src="http://bdi.inventivewebdesign.com/wp-content/uploads/2020/05/john-smith.jpg">

    <div id="interactive-banner-wrap-3639" class="ult-new-ib-desc" style="background:rgba(0,0,0,0.5);">
        <h2 class="ult-new-ib-title ult-responsive" data-ultimate-target="#interactive-banner-wrap-3639 .ult-new-ib-title" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:normal;color:#ffffff;">Technical</h2>
    </div>

    <a class="ult-new-ib-link" href="http://bdi.inventivewebdesign.com/about/team/john-smith-2/" title="John Smith"></a>

</div>

技术的

在自定义css中添加以下样式以恢复悬停时的颜色：

#team .ult-new-ib:hover img {
  filter: none !important;
}

---

因此，我们将从父div悬停上的图像中删除过滤器，该悬停将该过滤器应用于灰度

太好了。非常感谢。