A stack that creates a blurred overlay?


(Garth Poon) #1

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!!


Frosted Glass Stack
(Robert Ziebol 🖖🏼) #2

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.


(Garth Poon) #3

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


(Paul Russam) #4

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

(Paul Russam) #5

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


(Garth Poon) #6

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


(Steve Jenkins) #7

Mind dropping an example project file with this example?


(Christopher Watson) #8

Very nice.

Cheers for your ears…


(Jan Fuellemann) #9

Yes, please! That would be great!


(Rob Beattie) #10

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

Rob


(Matthias Ficht) #11

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


(Paul Russam) #12

@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:


(Andrew Tavernor) #13

@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.


(Paul Russam) #15

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.


(Matthias Ficht) #16

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


(Gary) #17

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.


(Gary) #18

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


(Paul Russam) #19

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


(Jan Fuellemann) #20

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?


(Matthias Ficht) #21

Similar here. Absolutely no clue…