Blurring Row Background Images

Someone asked if it was possible to blur a background-image using filters for Beaver Builder rows. Due to the way the background-container is used and all elements are positioned into it, when adding the filter:blur() properties as a class, all contents will be blurred out. So I decided to go another route.

Using jQuery a selection of the properties are copied over to a newly inserted element at the bottom of the parent-container, so behind the background. It matches all appropriate styles automatically and adds a few that are needed to fit the blurred image behind the container. It then removes the image from the initial container.

There are a few things:

1. The blurred version of the image will probably be slightly bigger than the original because the borders are blurred out too. We enlarge the image by 10% and hide 5% on all sides out of view.
2. It might have a slight delay, it executes on document-ready.
3. Because the borders need to be hidden the containing container needs to hide the overflow. When editing the page this is a problem, because the icons to edit modules and rows are also outside of the container. So the blur effect is only applied when we are NOT in the editor.
4. When saving or cancelling an edit, the page is not reloaded and does not display the blur immediately. Just hit reload and the blur effect is applied. Visitors should see the blur applied normally.

You only need to do three things to apply the blur:

1. Copy the code that is below to your “Global Settings > Javascript” tab.
2. Add a row-background-type ‘Image’ and an image (can be a connector if you want to).
3. Add a class-name called ‘blureffect’ to that row on the ‘Advanced’ tab.

Save, reload and watch it happen. Any row that has the class ‘blureffect’ applied to have that blur, no matter what the image is.

[pastacode lang=”javascript” path_id=”9ba7b8ab8e18c0d2fbbcac51cc30971a/96a8313dbf4b22ce4486cdb07b5bbbcb856e4438″ file=”” highlight=”” lines=”” provider=”gist”/]