simona6 Posted Thursday at 08:17 AM Share Posted Thursday at 08:17 AM 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. Quote Link to comment Share on other sites More sharing options...
requinix Posted Thursday at 10:18 AM Share Posted Thursday at 10:18 AM 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. Quote Link to comment Share on other sites More sharing options...
simona6 Posted Thursday at 10:23 AM Author Share Posted Thursday at 10:23 AM home-banner is the outer container, to ensure no other images using porto-ibanner are affected on the page. Â Quote Link to comment Share on other sites More sharing options...
requinix Posted Thursday at 10:29 AM Share Posted Thursday at 10:29 AM 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%); } Â Quote Link to comment Share on other sites More sharing options...
simona6 Posted Thursday at 10:36 AM Author Share Posted Thursday at 10:36 AM 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%); } Â Quote Link to comment Share on other sites More sharing options...
requinix Posted Thursday at 08:01 PM Share Posted Thursday at 08:01 PM 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. 1 Quote Link to comment Share on other sites More sharing options...
simona6 Posted Friday at 08:00 AM Author Share Posted Friday at 08:00 AM Oh... so what should I be setting it to, as it isn't doing that. Quote Link to comment Share on other sites More sharing options...
requinix Posted Friday at 08:44 AM Share Posted Friday at 08:44 AM 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. Quote Link to comment Share on other sites More sharing options...
simona6 Posted Friday at 10:52 AM Author Share Posted Friday at 10:52 AM 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. Quote Link to comment Share on other sites More sharing options...
requinix Posted Friday at 05:10 PM Share Posted Friday at 05:10 PM Is this site somewhere I can see it? Quote Link to comment Share on other sites More sharing options...
maxxd Posted Friday at 09:55 PM Share Posted Friday at 09:55 PM 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.