Forum Academy Marketplace Showcase Pricing Features

Blurry background image in group possible?

Hello,

is it possible to blur a background image inside a group so that it still perfectly matches the sharp image on its parent’s group?
Uploading a blurred image to a group is easy. But I can’t imagine how to set it up so that it is perfectly aligned to the sharp image in its parent group/page-background.

This is a quick Photoshop mockup:

I think you might have to use floating groups for both of them. I only just started using floating groups today for a project so take my advice with a grain of salt. (try it)

Try also/separately ‘fixed width’ button in settings.

This is pretty much ‘faking it’ as you know.

Too bad there’s no default way of doing this, that would be quite cool.

I believe however you can do it with CSS which means you would create a HTML element and use css in it. I don’t actually know how to do this yet. Search how to add a html element/css.

If you figure it out love to learn how you did it.

Whoah here is the option to do it, it looks simple enough (I’m not a css expert tho)

1 Like


1 Like

@ryan16: thanks for these interesting ideas! I will try to understand your concept with the floating group. :slight_smile:

@Taiheta: Thanks for this link. I am not sure how this might help in my situation, but I will try to have a look.

1 Like

Does it have to be blurred, as opposed to using opacity of the group on top. You could achieve this effect without any CSS:

Hey SerPunce,

that’s exactly how I used to do it in the past. But I wondered if it could be blurred as well as I like the blurry style. :slight_smile:
Blurring an image in a graphic Programm is not the problem. But syncing the background and the foreground seems to be not trivial. But maybe floating groups might help with this.


https://www.loom.com/share/80c8b60e4abc4c62b7a8cd028f732cf4 :innocent:

9 Likes

Oh wow! this looks very cool!!! :astonished:

This solution is just perfect!!! Thank you Taiheta.

1 Like

Nice clean and simple approach with some CSS.

1 Like

I use the HTML approach Taiheta mentioned

2 Likes

Hi @Taiheta,

I tried to rebuild your solution. But there is one thing I can’t figure out. I see that on button click the custom state “blur” is set to “no”. But where do you set this state to “yes”? And you do you do the toggle functionaity? I can only think of two workflow steps.

Set state no when state = yes
Set state yes when state = no

But that is not as efficient as your implementation.

Thanks in advance.

Hi, you can toggle a state like that with just one workflow action.
If the page’s blur state is no = that will equal yes and change to yes. Visa versa.

Nice one. Realy clever.

This is an interesting topic, I am also looking for something like that.

Thanks!

Best way, I think.
Thank you, pal.

One thing to be aware of, if you looked at the editor link I posted originally, the html doesn’t work for all browsers.

I lifted from Taiheta the code that needs to be used for it to work on all browsers.

Here is a link to an editor with that code

HA!!! This is sick, I actually did not know about the Yes/No functionality with just 1 workflow action, so thats sick. Also, for anyone trying this, you also need to have the Classify plugin installed, didnt see that mentioned