Custom CSS code

[wordpress-enthusiast]

Hi Paul

On the Home page is a ‘Restaurant of the Month’ Slider - screenshot below.

Can you formulate a custom css code to apply the glassmorphism effect b/g to text section of the card module on the slider ?

Glassmorphism code snippet

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);

The text section I am referring to is shown on the screenshots below:

onmouseout screenshot

onmousehover screenshot

I would like to show the GM effect b/g on both during the onmouseout & onmousehover action.

Also, the GM effect b/g should extend from edge to edge of the card module ( as opposed to a rectangle).

Homepage link

Cheers

[DaveMaxwell]

Not to sound rude, but have you attempted this on your own?

Paul has given you similar markup several times so I’d think you’d be able to take a step forward with this and attempt it. I’m sure he’d probably do it but he’s got his own business to run and clients to work on, and I’d like to see you make an attempt so you gain some knowledge and self-sufficiency.

Take other threads he’s given you markup on and see if you can work it out yourself, and I’m sure someone would be glad to get you over the hump if you can’t quite get it, but give it a try. You might surprise yourself….

[wordpress-enthusiast]

I’ll give it a try.

[PaulOB]

@wordpress-enthusiast

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);

As Dave said you should by now be starting to try these things on your own as you are progressing with this. However what you are asking here is quite complex as you have to find the right elements on which = to apply the effect.

The following code should get you close to what you want but with the usual caveat that it will likely work everwhere you use these classes so you may have to trweak it for a unique reference.

.listings-carousel .listing-two__content { 
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[wordpress-enthusiast]

Thanks Paul !