How do you change the brightness of the image in a DIV when you hover the DIV?

[simona6]

We are using WP Bakery and there is an element where you can have a DIV called ibanner, with an image in it.

When you hover, an overlay DIV moves up over the top of the image, part of the way.

What I want to do is when you hover over the containing DIV, the IMG tag image inside, goes darker.

I tried this, but it makes no difference.

.home-banner .porto-ibanner:hover  .home-banner .porto-ibanner img{ filter: brightness (50%); }

<div id="interactive-banner-wrap-6bsz" class="porto-ibanner vc_custom_1727942938709 mb-2" style=""><img fetchpriority="high" decoding="async" alt="" width="5472" height="3648" class="porto-ibanner-img" src="images go here><div class="porto-ibanner-desc"><div class="porto-ibanner-content" style="color:#777777;">
<h6>Secondary</h6>
<h3>Ages 11-16</h3>
<div class="desc"><a class="btn btn-md btn-light btn-rounded font-weight-bold" href="#"> <i class="fa fa-arrow-right ms-2 me-2 ps-3"></i></a></div>
<p></p></div></div></div>

I must be missing something.

[requinix]

If that's literally what you tried then I'm not surprised it didn't work: home-banner and porto-banner in that selector twice? That doesn't seem right.

[simona6]

home-banner is the outer container, to ensure no other images using porto-ibanner are affected on the page.

 

[requinix]

Sure, but does it contain a .porto-ibanner than contains another .home-banner that contains another .porto-ibanner that contains an image? Shouldn't that whole thing be just

.home-banner .porto-ibanner:hover img { filter: brightness (50%); }

 

[simona6]

No it's not working.

Does it matter if we already have it doing something else too?

.home-banner .porto-ibanner:hover .desc { max-height: 300px; }
.home-banner .porto-ibanner:hover img { filter: brightness (50%); }

 

[requinix]

Working for me. https://jsfiddle.net/w936eko0/

No, you can have as many rules as you want, even duplicates, but it does mean you need to pay attention to conflicting rules.
Which is what I think is going on here. Use your browser tools to force the .porto-ibanner into a hover state, then check what CSS rules it is and isn't applying.