mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
32 lines
No EOL
1.4 KiB
HTML
32 lines
No EOL
1.4 KiB
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover, blur filter, hover effect, hoverme, hover button, cardhover , card hover -->
|
|
<div
|
|
class="w-96 h-64 duration-500 group overflow-hidden relative rounded bg-neutral-800 text-neutral-50 p-4 flex flex-col justify-evenly"
|
|
>
|
|
<div
|
|
class="absolute blur duration-500 group-hover:blur-none w-72 h-72 rounded-full group-hover:translate-x-12 group-hover:translate-y-12 bg-sky-900 right-1 -bottom-24"
|
|
></div>
|
|
<div
|
|
class="absolute blur duration-500 group-hover:blur-none w-12 h-12 rounded-full group-hover:translate-x-12 group-hover:translate-y-2 bg-indigo-700 right-12 bottom-12"
|
|
></div>
|
|
<div
|
|
class="absolute blur duration-500 group-hover:blur-none w-36 h-36 rounded-full group-hover:translate-x-12 group-hover:-translate-y-12 bg-indigo-800 right-1 -top-12"
|
|
></div>
|
|
<div
|
|
class="absolute blur duration-500 group-hover:blur-none w-24 h-24 bg-sky-700 rounded-full group-hover:-translate-x-12"
|
|
></div>
|
|
<div class="z-10 flex flex-col justify-evenly w-full h-full">
|
|
<span class="text-2xl font-bold">Text title</span>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat
|
|
felis nec rutrum vulputate. Morbi ut lobortis enim. Nam nec elit nibh.
|
|
</p>
|
|
<button
|
|
class="hover:bg-neutral-200 bg-neutral-50 rounded text-neutral-800 font-extrabold w-full p-3"
|
|
>
|
|
See more
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|