simona6

Hi all This image is from Apple's new OS... and they called it Liquid Glass. I was wondering if there is some smart CSS you could create to turn this effect, into a Button? I know you can do blurring, but like this? with that sort of edging.. I tried a box shadow but even with rgba background of the button, it doesn't show thru. Love to see some ideas.

Thanks all. Mask - yes I know about that. Just an SVG that is applied to the image overlay, with some CSS that controls the sizing. If both are moving, it's prob a little tricky to recreate. Just kind of wondering generally how to do it. I know CSS pretty well, really well, but this is as someone here said, almost double layered CSS animation.

https://d-themes.com/wordpress/udesign/corporate-4/ Hi We are trying to create this effect on a website. So when the image loads, it comes in like that. I've tried to delve into the code, but can't quite work out what's needed. Does anyone know the solution so we can look and test?

We have a selection of tabs from a default Woocommerce website. The owner wants a button in the Short Description, than when clicked, takes the user down to the row of tabs (Description etc)... but SELECTS the "Product Enquiry" tab (which does have it's own #id). I've seen a few :target CSS methods, but don't understand. Can you please help?

Cover won't work. The website uses a Zoom classed DIV to show the "full size" image when you hover over it. If we did Cover, it would simply show it to "fill the box". The idea is when you zoom over, as it is the original image, it's like running a Mag glass over it. But we want to set a Min Width/Height, so if the image is too small, it will stretch it (don't care about quality). Possible?

We have website where hovering over the Product photo reveals the full size image, so it kind of "zooms". Trouble is, many old photos are smaller than the container. Is there a way in CSS to set the minimum size to say 600x600px... even if it stretches it... but when you get an image that is BIG... is still shows the full size?

Daaa PLANK! It's transition: filter, not transition: brightness. Thanks all. Works a treat.

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.

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

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.

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.

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

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

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

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.