Custom Coding for blur effect

[sibyllehornung]

Hi, I have a tiny coding request.

This is my website:
www.sibyllehornung.com

I would like to add a blur effect over my buttons
"Work", "Else", "Shop", and "Information".

The blur effect should be 0.8px like
filter: blur(0.8px);

• With hover, blur should go away, and when a page is clicked, the blur effect of that page should go away, too.
  [Similar to this page: http://kaiblamey.com/selectedwork/
  but in my case, the blur effect of a page would disappear when a page is activated.]

Both on Mobile + Desktop.

Feel free to reach out also per email:
work@sibyllehornung.com

[kalamakumaran]

Hi,

i sent you an email ;)

[Richard]

@sibyllehornung @kalamakumaran

Cool! best of luck, thank you for using Lay Theme! 🌝

---

[Rogue]

@sibyllehornung Hello, I see you have made it in the meantime. Would you like to share your experience?

[Richard]

Dear @Rogue

The user @sibyllehornung is applying the CSS 'filter' effect.

e.g

.custom-class{
filter: blur(0.7
px
);

https://www.w3schools.com/cssref/css3_pr_filter.asp

---

Best wishes & have a great day 🌻

Richard

[Rogue]

@Richard said in Custom Coding for blur effect:

Dear @Rogue

The user @sibyllehornung is applying the CSS 'filter' effect.

e.g

.custom-class{
filter: blur(0.7
px
);

https://www.w3schools.com/cssref/css3_pr_filter.asp

---

Best wishes & have a great day 🌻

Richard

Thank you Richard. 👌😀
Only it does not work when I go with the mouse over the text in the menu bar. Sorry, I don't have that much CSS experience yet.

[Richard]

No worries @Rogue 🌝
I believe you mean when 'hover' ing over the text.

https://www.w3schools.com/cssref/sel_hover.asp

Therefore the previous code would be changed to:

.custom-class:hover {
filter: blur(0.7
px
);

(Note: the class custom-class must be defined by you/attached to the menu-items, maybe i mislead with that sorry - let me know if you need clarification )

---

Best wishes & have a great day ✨

Richard

[Rogue]

This post is deleted!

[Rogue]

@Richard perfekt! It works.
next question .
When hovering, the blur should disappear, and when clicking on a page, the blur effect of that page should also disappear.

[Richard]

Dear @Rogue

Great to hear that it's working ✅
If you wish to customise further you will have to research the CSS personally as my role as Forum Moderator must be focused on Lay Theme Bugs/Issues.

Between Google & Lay Theme's Documentation page you will have no trouble 🌝
https://laytheme.com/documentation.html#custom-css-styling

Happy to help you in the right direction though!

"When hovering, the blur should disappear,"

Look into either display:none or opacity:0
I would suggest opacity as this wont remove the content and maintain design, it will only make the words disappear ( opacity:0 ).

---

Best wishes & have a great day 🌻

Richard

[Rogue]

@Richard
Hello Richard,

thank you very much for your efforts. It has worked wonderfully.

[Richard]

Great to hear @Rogue ! Best wishes ✨