There are three images displayed on this webpage:
This website is built on WordPress and utilizes the WP Bakery plugin for designing layouts.
The images here are set to change from color to grayscale, and back to color upon mouseover. The following CSS code was used to achieve this effect:
#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;
}
Initially, this functionality was working fine. However, when I added a banner element that displays a title upon hovering over the image, the image no longer switches back to color as expected. This could be due to interference caused by the text overlay or possibly the link associated with the image. Interestingly, even the middle image, which doesn't have a link, faces the same issue.
I am seeking assistance in getting both the text overlay and image color-changing effects to work simultaneously. Can anyone provide a solution?
Below is the HTML code snippet for reference:
<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="{"font-size":"","line-height":""}" 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>