CODEWITHSUNDEEP
htmlcss
Matt
Matt

Reputation: 231

Change image from grayscale to color with other hover effects

I have three images on this page: http://bdi.inventivewebdesign.com/about/team/

It is a wordpress site using the WP Bakery plugin for design layout.

It is set to change a color image to grayscale and then on mouseover bring it back to color. I used this 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;
}

It was working but then I chose another banner element that brings in a title when you hover over the image. I think this affects the way the image swithes to color because when I activate the hover status in my Inspect area in my browser for the actual image it still changes to color. Something with the text overlay is interfering or possibly the link. I don't think it is the link because the middle image does not have a link and it still doesn't convert to color.

Can anyone help me make this work so the text overlay still works and the image changes to color?

Here is the 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>

Upvotes: 1

Views: 3137

Answers (1)

Muhammad Asad
Muhammad Asad

Reputation: 3803

In your custom css adding folowing style to bring back colors on hover:

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

So we are remove filter from the image on parent div hover which is applying that filter to greyscale.

Upvotes: 1

Related Questions