G3: Baguette Box Lightbox: Blur the overlay?

inStacks
1

Evening all: Have a look here: http://ci-clientservices.com/clientdev/gallery/

If you click o the menu bars top right a modal opens up and at the same time the background blurs.

if you click here: http://ci-clientservices.com/clientdev/gallery/?post=food it opens an instance of G3 within Poster. Click one of the images and it opens in the Baguette lightbox. The background has an overlay over it but it’s not blurred. For continuity, I’d like if poss to blur it.

Tav gave me this code to blur the other modal background, and I’ve edited it a bit to get the effect on the G3 lightbox, but failed.

body.lightbox-open .stacks_top{
filter:blur(10px);
}

Hunting thru the css I thought the class to apply it to was baguetteBox-overlay but that is the actual overlay/lightbox image. I tried adding body. to the class, but no joy.

Is anyone able to help?

Ta.

2

It is exactly analogous, just use the baguette box open class instead of the limelight one

body.baguetteBox-open
if you want both on one page then separate with commas

body.lightbox-open .stacks_top, body.baguetteBox-open .stacks_top{
    filter:blur(8px);
}
1 Like
3

Ahh, and I was so close too! I just didn’t see the (obvious now) requirement to add the -open bit to baguetteBox!

Close… But no cigar!

As ever, thanks Tav.

4

It is not necessarily obvious - I just looked in the inspector to see what that plugin adds to the body. There is no convention here, just at the discretion of the plugin author.

5

So what you’re saying is I’m almost brilliant?

Take that 'spose.

1 Like
6

Nice - Thanks to both of you. I’m finding 3 or 4px gives a better effect, blurred enough, but not too much to obscure the page totally as 8px does ;-)

1 Like