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.

[simona6]

Oh... so what should I be setting it to, as it isn't doing that.

[requinix]

If you're asking what you have to do to make this work, the answer is: I don't know what the answer is because all you've given me to work with is a bit of HTML and something that may or may not match the CSS rules you're actually using. What I do know is that what you're trying to do, in principle, does work.

Which is why I offered the advice of how you can find out what the problem is, by which I mean a way for you to "debug" the CSS. Find out what rules are and are not applying, with your actual site that only you can see, and that should help you get closer to finding out what you have to do to make this work.

[simona6]

Ok sorry.  I don't really know then.  The CSS I have given is what is applied to make the DIV move up.  That's when you hover over the DIV.

So I assumed your code would also be based on that Div, but affect the image.  Which isn't doesn't.

[requinix]

Is this site somewhere I can see it?

[maxxd]

The times I've dealt with WPBakery it was a nightmare of nested divs, so it's possible you're just going to have to be more specific in targeting the element.

[simona6]

It's a development website, but yes am happy to share.
https://dev.knoleacademy.org/

They asked if when you hover over each of the three top tiles, if the image can darken.
 

[requinix]

I'm using my browser tools to inject a CSS rule exactly like what I said earlier

On 10/3/2024 at 3:29 AM, requinix said:

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%); }

 

and it's working for me.

But I'd probably edit it to be

.home-banner .porto-ibanner:hover > img
/* or */
.home-banner .porto-ibanner:hover .porto-ibanner-img

and I recommend adding some fade-in and fade-out transitions (it looks kinda weird to un-hover and the brightness returns but the popup thing takes a second before it hides again).

[simona6]

I have assigned it with no transition for now... and alas it is not doing anything.

[requinix]

Ah:

{filter:brightness (50%)}

It's silly but you can't have a space between "brightness" and the "(50%)". Remove that.

TIL

[simona6]

Wow that is daft - but works.

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

Can you tell me if this is the right transition code, as at the moment, when you hover over it, it goes dark, but no transition.

[simona6]

Daaa PLANK!  It's transition: filter, not transition: brightness.

Thanks all.  Works a treat.