diff --git a/src/components/account.css b/src/components/account.css index f1609f7c..aa81192c 100644 --- a/src/components/account.css +++ b/src/components/account.css @@ -3,7 +3,7 @@ } #account-container .header-banner { - pointer-events: none; + /* pointer-events: none; */ aspect-ratio: 6 / 1; width: 100%; height: auto; @@ -30,6 +30,9 @@ ); margin-bottom: -44px; } +#account-container .header-banner:hover { + animation: position-object 5s ease-in-out 1s 5; +} @media (min-height: 480px) { #account-container .header-banner { diff --git a/src/components/status.css b/src/components/status.css index 1c77c1c2..cd040375 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -426,20 +426,6 @@ .status .media { cursor: pointer; } -@keyframes position-object { - 0% { - object-position: 50% 50%; - } - 25% { - object-position: 0% 0%; - } - 75% { - object-position: 100% 100%; - } - 100% { - object-position: 50% 50%; - } -} .status .media img:is(:hover, :focus), a:focus-visible .status .media img { animation: position-object 5s ease-in-out 1s 5; diff --git a/src/index.css b/src/index.css index 10f83f35..f26c71e4 100644 --- a/src/index.css +++ b/src/index.css @@ -354,3 +354,18 @@ code { transform: translateY(0); } } + +@keyframes position-object { + 0% { + object-position: 50% 50%; + } + 25% { + object-position: 0% 0%; + } + 75% { + object-position: 100% 100%; + } + 100% { + object-position: 50% 50%; + } +}