mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
20 lines
No EOL
966 B
HTML
20 lines
No EOL
966 B
HTML
<!-- From Uiverse.io by hoshikawamaki - Tags: simple, material design, animation, purple, card, hover, hover effect, tailwindcss -->
|
|
<div
|
|
class="relative overflow-hidden w-60 h-80 rounded-3xl cursor-pointer text-2xl font-bold bg-purple-400"
|
|
>
|
|
<div class="z-10 absolute w-full h-full peer"></div>
|
|
<div
|
|
class="absolute peer-hover:-top-20 peer-hover:-left-16 peer-hover:w-[140%] peer-hover:h-[140%] -top-32 -left-16 w-32 h-44 rounded-full bg-purple-300 transition-all duration-500"
|
|
></div>
|
|
<div
|
|
class="absolute flex text-xl text-center items-end justify-end peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-32 -right-16 w-36 h-44 rounded-full bg-purple-300 transition-all duration-500"
|
|
>
|
|
Nice to meet u,<br />Uiverse
|
|
</div>
|
|
<div class="w-full h-full items-center justify-center flex uppercase">
|
|
hover me
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|