时间戳

首页 > 解决方案 > 使用其他悬停效果将图像从灰度更改为彩色

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

问题描述

我在此页面上有三张图片：http: //bdi.inventivewebdesign.com/about/team/

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

它设置为将彩色图像更改为灰度，然后在鼠标悬停时将其恢复为彩色。我使用了这个 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>

标签： htmlcss

解决方案

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

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

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

推荐阅读