How to apply a blur effect on a group when hovered?

Need help App Organization
1

Hey everyone! :waving_hand:
I’m currently trying to create a blur effect on a group to become slightly blurred while it hovered, and then return on normal when it’s not hovered anymore.

i’m using the new responsive engine, and i tried doing it with conditionals, but i don’t see the option to change appereance or apply a blur filter under conditionals.

Is there a native way to do this in bubble, or do i need to use custom CSS with an ID ettribute and an HTML element? Any advice or example would be really helpful!

Thanks in advance :folded_hands:

2

You can try changing the background colour
Then just get a bit creative and using fuller light colours to give that blurry effect

3 
<style>
 #blur {
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
</style>
4

Hey @workhardpesic :waving_hand:

I just created this plugin for this use case, hope it helps!

Marketplace: Hover Blur Plugin | Bubble
Demo: Bubble.io Plugin - Hover Blur
Bubble Editor: Tiny-hover-blur | Bubble Editor

1 Like
5

I want to show you a sample to confirm if it looks like what you want to do

But I don’t see a way to upload the video here on bubble forum

6

Thanks for trying to help you can send video here.

нед, 1. јун 2025. у 01:34 Pelumioladipo312 via Bubble Forum <notifications@forum.bubble.io> је написао/ла:

7

Thank you wery much mr. Paul you really help me.

суб, 31. мај 2025. у 19:38 Paul Beresuita via Bubble Forum <notifications@forum.bubble.io> је написао/ла: