"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."
"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. You might surprise yourself...."
Target the Restaurant of the Month slider card's text section and apply a translucent glassmorphism background using rgba plus backdrop-filter blur and a faint border. Ensure the effect appears on both mouseout (rest) and mousehover (hover) states. Make the translucent layer fill the card from edge to edge and follow the card's shape by using a positioned overlay with border-radius: inherit and inset:0, or use clip-path/mask to match non-rectangular shapes. Include smooth transition for opacity/blur, pointer-events:none on the overlay, and a fallback for browsers without backdrop-filter.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]