https://github.com/1dev-hridoy/enhanced-magic-glow-social-cards
Magic Hover Effect Social Cards: Stunning, interactive social media cards with dynamic mouse-tracking glow and smooth animations.
https://github.com/1dev-hridoy/enhanced-magic-glow-social-cards
css hover hovereffect html js purecss
Last synced: 2 months ago
JSON representation
Magic Hover Effect Social Cards: Stunning, interactive social media cards with dynamic mouse-tracking glow and smooth animations.
- Host: GitHub
- URL: https://github.com/1dev-hridoy/enhanced-magic-glow-social-cards
- Owner: 1dev-hridoy
- License: mit
- Created: 2025-02-10T17:42:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-11T04:58:49.000Z (4 months ago)
- Last Synced: 2025-02-17T20:53:44.825Z (4 months ago)
- Topics: css, hover, hovereffect, html, js, purecss
- Language: CSS
- Homepage: https://enhanced-magic-glow-social-cards.vercel.app/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Magic Hover Effect Social Cards 🌟
A beautiful, interactive social media card component with magical hover effects. Built with pure HTML, CSS, and JavaScript.
## Screenshot
## ✨ Features
- 🎨 **Stunning Hover Effects**: Dynamic glow and interactive lighting
- 🎯 **Mouse-Tracking Light Effect**: Responsive light movement based on cursor position
- 💫 **Smooth Animations**: Fluid transitions and interactive elements
- 🎭 **Platform-Specific Color Schemes**: Unique designs for different social platforms
- 📱 **Fully Responsive**: Seamless experience across devices
- 🌓 **Glass Morphism**: Modern, translucent design aesthetic
- 🔆 **Interactive Elements**: Engaging user experience
## 🛠️ Tech Stack
- HTML5
- CSS3
- Vanilla JavaScript
- Font Awesome Icons
## 🚀 Getting Started
### Prerequisites
- Modern web browser
- Basic understanding of HTML, CSS, and JavaScript
- Font Awesome CDN (included in the code)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/1dev-hridoy/Enhanced-Magic-Glow-Social-Cards.git
```
2. Navigate to the project directory:
```bash
cd magic-hover-cards
```
3. Open `index.html` in your preferred web browser
## 📂 Project Structure
```
magic-hover-cards/
│
├── index.html # Main HTML file
├── styles.css # CSS styling
├── script.js # JavaScript interactions
└── README.md # Project documentation
```
## 🎨 Customization
### Adding New Social Cards
1. Modify the HTML in `index.html`
2. Add platform-specific styles in `styles.css`
3. Update interaction logic in `script.js`
### Changing Color Schemes
Edit the CSS variables in `styles.css` to customize:
- Background colors
- Glow effects
- Hover states
## 🦖 Hover Effect Details
The social cards feature:
- Dynamically tracked mouse position
- Smooth gradient glow
- Subtle rotation on hover
- Interactive icon scaling
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.
## 🌟 Show Your Support
Give a ⭐️ if this project helped you!
Project Link: [https://github.com/1dev-hridoy/Enhanced-Magic-Glow-Social-Cards.git](https://github.com/1dev-hridoy/Enhanced-Magic-Glow-Social-Cards.git)