fading in /tags page
-
no no my god, not constantly animation !!
If I hover over the logo, the animation triggers as currently, continues and ends even if I remove the mouse from the logo.
That’s what’s happening here on Sudonix.
@DownPW I see what you mean. The reason for this is that you are calling both
rotate180
androtate0
which are two separate effects.animation-name: rotate180, rotate0;
You could remove
rotate0
from this section and that will stop the animation as soon as themouseLeave
event is triggered in theDOM
(in other words, as soon as you remove the hover)animation-name: rotate180;
-
hmm not work
can you provide your CSS code and keyframe for I see it ?
On sudonix, the animation stop and restart when we leave the mouse over. -
hmm not work
can you provide your CSS code and keyframe for I see it ?
On sudonix, the animation stop and restart when we leave the mouse over.@DownPW it’s here
https://sudonix.com/post/3590The exact CSS I have here is
@keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } .forum-logo:hover { transform: rotate(180deg); } .hover { transform: rotate(180deg); } -
-
The tags page looked better before, it does not look good when it is very “ordered”. @phenomlab do you have any intention to change that page in harmony thema?
-
The tags page looked better before, it does not look good when it is very “ordered”. @phenomlab do you have any intention to change that page in harmony thema?
@crazycells I must admit, I’ve neglected the tags page somewhat, but I do agree with you - it’s pretty dull and could do with some magic.
-
The tags page looked better before, it does not look good when it is very “ordered”. @phenomlab do you have any intention to change that page in harmony thema?
@crazycells just for you…
-
@crazycells just for you…
@phenomlab nice
this looks very good…
On a side note, I have been just watching/listening Doc and Marty’s adventures in the background and then I see this
-
@phenomlab can you please share the CSS codes?
-
@phenomlab can you please share the CSS codes?
@crazycells Of course… You did ask me for these
.tags:not([component="topic/tags"]) a[href*="/tags/"] { border: 1px solid var(--bs-border-color); border-radius: 0.375rem; margin: 8px; width: 145px; background: var(--bs-body-navbar); } /* SIBLING FADE: fade out siblings around a hovered item */ .tag-list { visibility: hidden; } /* Prevents :hover from triggering in the gaps between items */ .tag-list > * { visibility: visible; } /* Brings the child items back in, even though the parent is `hidden` */ .tag-list > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; } /* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */ .tag-list:hover > * { opacity: 0.4; transform: scale(0.9); } /* Fade out all items when the parent is hovered */ .tag-list > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; } /* Fade in the currently hovered item */ .tags a[href*="/tags/"] .tag-item { border-bottom: 4px solid var(--bs-border-color) !important; } -
-
@DownPW Thanks, and welcome to “Grand Master” status
-
Ohhh yes
-
-
@DownPW Yes, I am aware. Will address shortly.
EDIT - replace
.tags a[href*="/tags/"] { border: 1px solid var(--bs-border-color); border-radius: 0.375rem; margin: 8px; width: 145px; background: var(--bs-body-navbar); } With
.tags:not([component="topic/tags"]) a[href*="/tags/"] { border: 1px solid var(--bs-border-color); border-radius: 0.375rem; margin: 8px; width: 145px; background: var(--bs-body-navbar); } Updating original post
-
Fix working perfectly
Did this solution help you?
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 (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.
With your input, this post could be even better 💗
RegisterLog in