Custom Coding for blur effect
-
Hi,
i sent you an email ;)
-
-
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.com@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
@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. -
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
-
-
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
-
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better π
Register Login