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 t…

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 c…

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!

[image] Andres_DV: http://sab.webflow.com/html/blur 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…

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

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) …

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?

Can you give me your sharing/public link?

https://preview.webflow.com/preview/spgroup?preview=151ddf3e816adf8fc154bd75b4ed07f8 The home page hero is what i want blurred.

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); …

BLURRED overlay and actions

Design help Animations & Interactions

vincent (Vincent Bidaux) February 5, 2015, 9:37pm 5

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

Topic		Replies	Views
Blur effect isn't covering the whole div General	9	13727	December 30, 2015
Image Blur On Hover General	6	5673	January 11, 2016
Blurred background modal window Custom code	5	3187	June 2, 2016
Blur overlay for part of image General	6	3071	December 7, 2019
How Can I put this effect into my Webflow? Custom code inspiration	4	1523	August 4, 2020

BLURRED overlay and actions

Related topics