mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
24 lines
No EOL
845 B
HTML
24 lines
No EOL
845 B
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: card, hover, hover effect, hoverme, cardhover , card animation, card hover, tailwind -->
|
|
<div
|
|
class="relative group cursor-pointer overflow-hidden duration-500 w-64 h-80 bg-zinc-800 text-gray-50 p-5"
|
|
>
|
|
<div class="">
|
|
<div
|
|
class="group-hover:scale-110 w-full h-60 bg-blue-400 duration-500"
|
|
></div>
|
|
<div
|
|
class="absolute w-56 left-0 p-5 -bottom-16 duration-500 group-hover:-translate-y-12"
|
|
>
|
|
<div
|
|
class="absolute -z-10 left-0 w-64 h-28 opacity-0 duration-500 group-hover:opacity-50 group-hover:bg-blue-900"
|
|
></div>
|
|
<span class="text-xl font-bold">Hover me!</span>
|
|
<p class="group-hover:opacity-100 w-56 duration-500 opacity-0">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|