liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 39 Activity

add hover animation for emojis

Browse source
This commit is contained in:
liquidex 2024-02-08 11:49:17 +01:00
parent 099d5e4496
commit b5298c68da
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/css/main.css
View file

@ -358,17 +358,19 @@ img[is="th-emoji"] {
/* And also style emoji tooltips. */ /* And also style emoji tooltips. */
.emoji-wrapper { .emoji-wrapper {
--transition-duration: 0.2s;
position: relative; position: relative;
} }
.emoji-tooltip { .emoji-tooltip {
display: none; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%) translateY(-10%) scale(0.8);
width: max-content; width: max-content;
z-index: 100; z-index: 100;
@ -376,10 +378,20 @@ img[is="th-emoji"] {
padding: 8px; padding: 8px;
margin-top: 8px; margin-top: 8px;
border-radius: 6px; border-radius: 6px;
transition:
opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
filter var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0%;
filter: blur(3px);
pointer-events: none;
} }
.emoji-wrapper:hover .emoji-tooltip { .emoji-wrapper:hover .emoji-tooltip {
display: flex; opacity: 100%;
filter: blur(0px);
transform: translateX(-50%) scale(1.0);
} }
.emoji-tooltip img { .emoji-tooltip img {