Blur on Containers with Overlaps Not Blurred

[WebbSpots]

#3811

Want to see some custom effects with Blur on a container or column? Setting blur on a container or column means any element added will also be blurred. We are going to add a container/column below the blurred one and add a negative margin to bring the elements over the blurred image.
This is easy to visualize and follow if you use Live Builder! These examples use containers but apply to columns as well.
Start with a container. Give the container a background image.

Set container padding to display the image as you wish.

Now apply blur to the container in Extras/Filter Type/Blur. Set the amount of blur to your liking. Don’t forget the hover options as well.

Here is the fun part! Overlapping the Blur Container with a Container/Column with Title and Text elements.

Create a Container with a column below the Blur Container. Use Title and Text elements that will bring your story to life! Or another image, postcard, whatever tickles your fancy. Next set a negative margin on this container. Adjust the negative to get the desired effect.

Save and view your finished blur overlap on the front end!  Keep in mind you may need to make adjustments for mobile so check the result there as well…

[WebbSpots]

#3819

Want just the column holding text/title (over a clear image) blurred?
Use css
.my-blur {
backdrop-filter:blur(25px)
}

Add a container with a background image.  Set padding to display the image as you require.

Add a column with a css class that matches the css  you are using.  Add a text box (or whatever you want to display with the blurred background) to the column.

Add CSS to either Avada/Options/Custom CSS or to the Page CSS:

Result is a clear image, column that is blurred and clear text over it.

Thanks to Stephen Walker for the clean css to accomplish this!

 

 

 

[Author]

Posts