Jump to content

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


Go to solution Solved by requinix,

Recommended Posts

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.

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

 

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

 

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.

  • Great Answer 1

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.

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.

  • 2 weeks later...

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).

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.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.