Streaming live at 10am (PST)

Blur filter (Parent = Child?) difficulties

Hey all,
I’ve recently added some grids with link buttons to the home page and I would love to use the Blur effect in combination with the hover none state and have no blur on the hover state. Now the issue comes the Linkbox itself (Parent) Should have this blur and blur out effect however the Textbox (Child) I dragged onto it should remain unblurred in both states. I simply can’t find a way to make the link box blurred and have the text clear.

Hope somebody can help

Here is my public share link:

This behavior it is the expected. If you apply a blur filter to an element, every element as a child, will be also blurred. Same will happen with other properties such as opacity, transform, etc. If you want the text to remain clear while the image is blurred, they should be sibling elements instead of the parent > child relationship. This can be accomplished by making use of absolute positioning.


Give the link-wrapper element position: relative and text element position: absolute.

I now have a problem where when giving blur to the parent, it doesn’t blur the child even if I also put the same blur on the child. How can I solve that?
.parent { backdrop-filter: blur(4px); }
.child { backdrop-filter: blur(4px); }