Docs
Growing Card
Growing Card
Display a Growing Card made by TailwindCSS
Installation
Copy and paste the Growing Card code into your project.
API Reference
A React component that displays an image card with an interactive glowing effect that follows the mouse cursor.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| imageUrl | string | "https://img.buoucoding.com/image/3.jpg" | The URL of the image to display in the card. |
| width | number | 350 | The width of the card in pixels. |
| height | number | 500 | The height of the card in pixels. |
| className | string | "" | Additional CSS classes to apply to the card container. |
Usage
export default function Demo() {
return (
<div className="flex flex-wrap items-center justify-center">
<GlowingCard imageUrl="https://img.buoucoding.com/image/2.jpg" />
</div>
)
}
Notes
- The glowing effect is only visible when the mouse is hovering over the card.
- The component uses CSS variables and mask properties which may not be supported in older browsers.
- For optimal performance, consider using optimized images with appropriate dimensions.