Streaming live at 10am (PST)

Replacing image in blurr template


#1

If I replace the background image in the free blurr template, the image is not blurred even after publishing the site.

https://webflow.com/templates/Blurr

Is this just a limitation? If so, the feature list of the template is pretty misleading.


#2

It doesn't say it's a dynamic blur. The background image is just blurred:

You can blur your image in an editor (In Photoshop I'd recommend the Lens blur, if not the Gaussian).

Or you can add a CSS property in custom code to blur the image dynamically. Look here: http://sab.webflow.com/html/blur

The blur depicted on this page is pretty heavy, you can adjust the value in the code. Clone the site to check the added custom code, or copy the following into the Head section of your site's custom code tab (in the Dashboard):

<style>
.blur {    
    -webkit-filter: blur(15px); 
       -moz-filter: blur(15px);
        -ms-filter: blur(15px);    
            filter: blur(15px);    
}
</style>

Then add the class "blur" to your image. You'll see the effects on the published website only.

You can start with a value of 4px and see from there.

If you need your image to always be blurry, don't use the CSS code and prefer blurring your image in a editor. It takes much more power to a browser to blur an image than to just display a blurred one. CSS blur fx is most likely used when you want to transition from an image to its blurred version.


#3