BLURRED overlay and actions

Design help Animations & Interactions
1

Hello Webflow peeps!

please look at what I want to achieve here:

http://www.800dollarwebsites.com/temp/webflow%20question.png

So what’s happening on this page? the user needs to interact with the first image (clicking thumbs Up/Down) so that the next image gets un-blurred.

1- I dont know how to add a blur overlay (It is important that the solution does NOT involve two images one with blur and one without).
2- How to setup the trigger so that once user clicks on thumbs Up/Down blur disappears on the upcoming image.

I hope this all makes sense…

<<<<<Screaming heeeeeelp.

:wink:

thanks!

2

Blur can be achieved in CSS. http://sab.webflow.com/html/blur (you need to add the css as custom code).

You can create a structure where you have an element with the image on background. Dulicate it and pile it one on top of the other, put the blur class to the one on the top. On interaction, you can make the one on top fade out to reveal the unblurred.

With webflow it’s not possible to say “the next one” with interactions. You’ll need one interaction per thumb, each interaction will target the next blurred element and fade it out.

1 Like
3

thanks Vincent,

I can’t clone the project as I have the Micro plan (only one site)…would you share the custom code here?
thanks!

4

Of course.

.blur {    
    -webkit-filter: blur(15px); 
       -moz-filter: blur(15px);
        -ms-filter: blur(15px);    
            filter: blur(15px);    
}
.grayscale
{
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
}
.saturate
{
        filter: saturate(500%);
        -webkit-filter: saturate(500%);
        -moz-filter: saturate(500%);
        -o-filter: saturate(500%);
        -ms-filter: saturate(500%);
}
.sepia
{
        filter: sepia(1);
        -webkit-filter: sepia(1);
        -moz-filter: sepia(1);
        -o-filter: sepia(1);
        -ms-filter: sepia(1);
}
.invert 
{
        filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
}
.brightness
{
        filter: brightness(50%);
        -webkit-filter: brightness(50%);
        -moz-filter: brightness(50%);
        -o-filter: brightness(50%);
        -ms-filter: brightness(50%);
}
1 Like
5

Needless to say you control the strenght of the blur by modifying the value. 15px is a lot of blur.

6

@vincent How do I add the blur effect to a single image? Where do I add the code?

7

You give the image a class, like “blurme”.
Then you write your code:

.blurme {-webkit-filter: blur(15px); 
       -moz-filter: blur(15px);
        -ms-filter: blur(15px);    
            filter: blur(15px);    
}

And put it either in custom code at site level (dashboard, cutsom code tab, header) or page level:

http://vincent.polenordstudio.fr/snap/kcsgt.jpg

in both cases you wrap it into <style> tag:

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

I added the code at the page level and gave the class “blurme” but still no blur? Any step I’m missing other than those 2?

9

Can you give me your sharing/public link?

10

https://preview.webflow.com/preview/spgroup?preview=151ddf3e816adf8fc154bd75b4ed07f8

The home page hero is what i want blurred.

1 Like
11

Oh, sorry the last part of my first message here didn’t show up becuase I forgot to style it as a code.

I corrected it, and it was this:

in both cases you wrap it into <style> tag

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

Awesome, thanks! Now what are the 4 different filters? Are all four just for the blur? Is one of them for a feather effect? Because the photo is feathering a bit too much along the edges :grin:

13

Hey Vincent, thanks for these awesome tips. I am making a modal via Sergie’s method and I’d like to have the background blur the page underneath. Is this possible? Thanks!

1 Like