A stack that creates a blurred overlay?

Hi everyone! Is there a stack that creates a blurred overlay over part of an image?

Here’s an example of what I’m talking about:

The blurred look seems to be quite common these days. I know that the Section Box stack can add a blur filter to the whole image, but I don’t think it can add a blur filter to half of the image.

Any suggestions would be welcome…thanks!!

You could cut the image where you want the blur, then use Sections Pro and a 2 column stack and put the images next to each other and have sections box use the blur filter.

1 Like

Hm…that’s an interesting idea…thanks Zeebe!

1 Like

http://www.sandbox.russam.me/statics/

  • SectionPro with the Background Image
  • SectionsBox wih a ID of 1, Floating, 30% the width of the SectionPro with the same image as background.
  • Animate child stack applied to Box id 1 with a blur filter.
  • Another box with id2 or no id, Floating, 30% width, Overlay of transparent black.
  • Header and para in the 2nd Box
5 Likes

Just updated that page with a 2nd version where the blurred overlay is animated on hover

5 Likes

Paul, that is perfect! I’ll try to re-create it myself…thanks!!

Mind dropping an example project file with this example?

1 Like

Very nice.

Cheers for your ears…

Yes, please! That would be great!

I think that going forwards, the answer to every ‘is there a stack for this?’ question is going to be ‘Sections Pro’.

Rob

2 Likes

@PaulRussam Yes, I’d also like a project file for the blurred overlay. Tried it myself now for half an hour without success…

@tav of BigWhiteDuck is planning on a site dedicated to showing what can be done with SectionsBox, I’m sure this and others from my Sandbox will be there, for now continue playing and see what you can create :slight_smile:

@RapidBase @Fuellemann @garth @robbeattie

I have now got a new domain set up that will be dedicated to sharing layouts and examples as @PaulRussam said. This will ensure that all the resources are in one place and easy to find. I will add some examples of this to kick things off (hopefully early this coming week).

I will post again here to let you know as soon as it is done.

7 Likes

Another example of a blurred background … just for the fun of it :slight_smile:
http://www.sandbox.russam.me/statics/
This time it’s set to ‘When in View’ so everytime you scroll it into view the animation will occur.

1 Like

Un-be-lievable what you’re doing there! Really great examples. :smiley:

That’s a very challenging layout to blur the portion of the original image under the How We Brew section and make it scale and respond to a changing screen size.

This would make a great SectionBox exam question.

@PaulRussam Missed your recent demo. You have done it I think.

No think about it :slight_smile: … Piss simple with Tav’s magic toolbox

Once you see it … I try to recreate it, but the image in box 1 is not cut off at the 40% width, but the image is reduced proportional:

Any clue?

Similar here. Absolutely no clue…