Script/SVG to blur underneath an...

User 2706435 Photo


Ambassador
397 posts

I have a transparent button. I'd like to blur anything that is behind the button.I know of the double image tricks. But I just want the area that is through the transparent button to be blurred, and this button can move around depending on the responsive layout.

I haven't found a javascript routine, the search results are too muddied with simple blurring techniques. I have seen some fliters for svg objects that will blur, but I don't know if they will blur elements underneath the svg.

User 188640 Photo


Registered User
758 posts

Bill,

Are you trying to 'hide' something that will be behind the button?

Or, do you just want the blur effect as the button background so you can 'kind of see' what's behind?

If you have PhotoShop you might be able to do that to your button.

Or am I reading your question the wrong way?

A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
758 posts

Bill,

Go check this out and see if it's what you wanted or at least be a work around: https://codepen.io/ariona/pen/geFIK
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
758 posts

That may not be what you wanted as that does use two images. Sorry for the ring.
A Rose is Just a Weed in a Corn Patch!
User 2706435 Photo


Ambassador
397 posts

Thanks. I am hopinng for a way to not have to use two images. I don't think that would be good for mobile. Otherwise, just change how how the element will look on mobile screens without a 2nd image.
User 122279 Photo


Senior Advisor
12,600 posts
Online Now

Haven't tried, but would it be an idea to make a button with something like a radial gradient where the outer part is nearly transparent?
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 187934 Photo


Senior Advisor
18,749 posts
Online Now

Like Inger stated. Make your button have an outer edge that has the blurring surround.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.