Custom Coding for blur effect
-
-
Hi, I have a tiny coding request.
This is my website:
www.sibyllehornung.comI 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.comwrote on Nov 8, 2021, 8:10 AM last edited by@sibyllehornung Hello, I see you have made it in the meantime. Would you like to share your experience?
- With hover, blur should go away, and when a page is clicked, the blur effect of that page should go away, too.
-
Dear @Rogue
The user @sibyllehornung is applying the CSS 'filter' effect.
e.g
.custom-class{ filter: blur(0.7 px );
Best wishes & have a great day 🌻
Richard
-
Dear @Rogue
The user @sibyllehornung is applying the CSS 'filter' effect.
e.g
.custom-class{ filter: blur(0.7 px );
Best wishes & have a great day 🌻
Richard
wrote on Nov 9, 2021, 6:48 AM last edited by@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 );
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. -
Global Moderatorwrote on Nov 10, 2021, 1:27 AM last edited by Richard Nov 9, 2021, 8:29 PM
No worries @Rogue 🌝
I believe you mean when 'hover' ing over the text.Therefore the previous code would be changed to:
.custom-class:hover { filter: blur(0.7 px );(Note: the class
custom-classmust 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
-
wrote on Nov 10, 2021, 7:55 AM last edited by Rogue Nov 10, 2021, 2:55 AMThis post is deleted!
-
No worries @Rogue 🌝
I believe you mean when 'hover' ing over the text.Therefore the previous code would be changed to:
.custom-class:hover { filter: blur(0.7 px );(Note: the class
custom-classmust 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
-
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-stylingHappy to help you in the right direction though!
"When hovering, the blur should disappear,"
Look into either
display:noneoropacity: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
-
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-stylingHappy to help you in the right direction though!
"When hovering, the blur should disappear,"
Look into either
display:noneoropacity: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
-
Great to hear @Rogue ! Best wishes ✨
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it