flex-card-hover-effect
Version:
An Astro component that creates an interactive, responsive card layout using Flexbox. Each card features a smooth hover animation that highlights the active card while subtly dimming or scaling the others. Perfect for showcasing projects, team members, or
33 lines (24 loc) • 967 B
Markdown
# flex-card-hover-effect
An Astro component that creates an interactive, responsive card layout using Flexbox. Each card features a smooth hover animation that highlights the active card while subtly dimming or scaling the others. Perfect for showcasing projects, team members, or product previews with an elegant and modern touch.
## Installation 📖
```bash
# You can intall with npm
npm install flex-card-hover-effect
# or with yarn
yarn add flex-card-hover-effect
# or with pnpm
pnpm add flex-card-hover-effect
```
## Usage ⚙️
```astro
import FlexCardHoverEffect from 'flex-card-hover-effect';
<FlexCardHoverEffect arrayImages={[
{ src: '../img-1.avif', text: 'Card 1 '},
{ src: '../img-2.avif', text: 'Card 2 '},
{ src: '../img-3.avif', text: 'Card 3 '}
]} />
```
## Demo 📹
[](https://20essentials.github.io/project-1306/)